

<!DOCTYPE html>
<html class="writer-html5" lang="en" >
<head>
  <meta charset="utf-8" />
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
  <title>Images &mdash; LVGL  documentation</title>
  

  
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/pygments.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/theme.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/custom.css" type="text/css" />
  <link rel="stylesheet" href="../_static/css/fontawesome.min.css" type="text/css" />

  
  
    <link rel="shortcut icon" href="../_static/favicon.png"/>
  

  
  

  
    <link rel="canonical" href="https://docs.lvgl.io/v8.4/en/html/overview/image.html" />

  
  <!--[if lt IE 9]>
    <script src="../_static/js/html5shiv.min.js"></script>
  <![endif]-->
  
    
      <script type="text/javascript" id="documentation_options" data-url_root="../" src="../_static/documentation_options.js"></script>
        <script data-url_root="../" id="documentation_options" src="../_static/documentation_options.js"></script>
        <script src="../_static/jquery.js"></script>
        <script src="../_static/underscore.js"></script>
        <script src="../_static/doctools.js"></script>
        <script src="../_static/js/custom.js"></script>
    
    <script type="text/javascript" src="../_static/js/theme.js"></script>

    
    <link rel="index" title="Index" href="../genindex.html" />
    <link rel="search" title="Search" href="../search.html" />
    <link rel="next" title="File system" href="file-system.html" />
    <link rel="prev" title="Fonts" href="font.html" />
 
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-78811084-3"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

	gtag('config', 'UA-78811084-3', { 'anonymize_ip': true });
</script>

</head>

<body class="wy-body-for-nav">

   
  <div class="wy-grid-for-nav">
    
    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
      <div class="wy-side-scroll">
        <div class="wy-side-nav-search" >
          

          
            <a href="../index.html">
          

          
            
            <img src="../_static/logo_lvgl.png" class="logo" alt="Logo"/>
          
          </a>

          
            
            
              <div class="version">
                8.4
              </div>
            
          

          
<div role="search">
  <form id="rtd-search-form" class="wy-form" action="../search.html" method="get">
    <input type="text" name="q" placeholder="Search docs" />
    <input type="hidden" name="check_keywords" value="yes" />
    <input type="hidden" name="area" value="default" />
  </form>
</div>

          
        </div>

        
        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
          
            
            
              
            
            
              <ul class="current">
<li class="toctree-l1"><a class="reference internal" href="../intro/index.html">Introduction</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#key-features">Key features</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#requirements">Requirements</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#license">License</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#repository-layout">Repository layout</a></li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#release-policy">Release policy</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#release-cycle">Release cycle</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#branches">Branches</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#changelog">Changelog</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#version-support">Version support</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../intro/index.html#faq">FAQ</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#where-can-i-ask-questions">Where can I ask questions?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-mcu-hardware-supported">Is my MCU/hardware supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#is-my-display-supported">Is my display supported?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#lvgl-doesn-t-start-randomly-crashes-or-nothing-is-drawn-on-the-display-what-can-be-the-problem">LVGL doesn't start, randomly crashes or nothing is drawn on the display. What can be the problem?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#my-display-driver-is-not-called-what-have-i-missed">My display driver is not called. What have I missed?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-is-the-display-driver-called-only-once-only-the-upper-part-of-the-display-is-refreshed">Why is the display driver called only once? Only the upper part of the display is refreshed.</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-do-i-see-only-garbage-on-the-screen">Why do I see only garbage on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#why-do-i-see-nonsense-colors-on-the-screen">Why do I see nonsense colors on the screen?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-speed-up-my-ui">How to speed up my UI?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-flash-rom-usage">How to reduce flash/ROM usage?</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-reduce-the-ram-usage">How to reduce the RAM usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../intro/index.html#how-to-work-with-an-operating-system">How to work with an operating system?</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../examples.html">Examples</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../examples.html#get-started">Get started</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#a-button-with-a-label-and-react-on-click-event">A button with a label and react on click event</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#create-styles-from-scratch-for-buttons">Create styles from scratch for buttons</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#create-a-slider-and-write-its-value-on-a-label">Create a slider and write its value on a label</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../examples.html#styles">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#size-styles">Size styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#background-styles">Background styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#border-styles">Border styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#outline-styles">Outline styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#shadow-styles">Shadow styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#image-styles">Image styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#text-styles">Text styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#line-styles">Line styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#transition">Transition</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#using-multiple-styles">Using multiple styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#local-styles">Local styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#add-styles-to-parts-and-states">Add styles to parts and states</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#extending-the-current-theme">Extending the current theme</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#opacity-and-transformations">Opacity and Transformations</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../examples.html#animations">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#start-animation-on-an-event">Start animation on an event</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#playback-animation">Playback animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#animation-timeline">Animation timeline</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../examples.html#events">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#button-click-event">Button click event</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#handle-multiple-events">Handle multiple events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#event-bubbling">Event bubbling</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../examples.html#layouts">Layouts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#flex">Flex</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#a-simple-row-and-a-column-layout-with-flexbox">A simple row and a column layout with flexbox</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#arrange-items-in-rows-with-wrap-and-even-spacing">Arrange items in rows with wrap and even spacing</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#demonstrate-flex-grow">Demonstrate flex grow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#id1">Demonstrate flex grow.</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#demonstrate-column-and-row-gap-style-properties">Demonstrate column and row gap style properties</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#rtl-base-direction-changes-order-of-the-items">RTL base direction changes order of the items</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#grid">Grid</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#a-simple-grid">A simple grid</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#demonstrate-cell-placement-and-span">Demonstrate cell placement and span</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#demonstrate-grid-s-free-unit">Demonstrate grid's &quot;free unit&quot;</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#demonstrate-track-placement">Demonstrate track placement</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#demonstrate-column-and-row-gap">Demonstrate column and row gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#demonstrate-rtl-direction-on-grid">Demonstrate RTL direction on grid</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../examples.html#scrolling">Scrolling</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#nested-scrolling">Nested scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#snapping">Snapping</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#floating-button">Floating button</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#styling-the-scrollbars">Styling the scrollbars</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#right-to-left-scrolling">Right to left scrolling</a></li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#translate-on-scroll">Translate on scroll</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../examples.html#widgets">Widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#base-object">Base object</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#base-objects-with-custom-styles">Base objects with custom styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#make-an-object-draggable">Make an object draggable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#arc">Arc</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-arc">Simple Arc</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#loader-with-arc">Loader with Arc</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#bar">Bar</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-bar">Simple Bar</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#styling-a-bar">Styling a bar</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#temperature-meter">Temperature meter</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#stripe-pattern-and-range-value">Stripe pattern and range value</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#bar-with-ltr-and-rtl-base-direction">Bar with LTR and RTL base direction</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#custom-drawer-to-show-the-current-value">Custom drawer to show the current value</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#button">Button</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-buttons">Simple Buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#styling-buttons">Styling buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#gummy-button">Gummy button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#button-matrix">Button matrix</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-button-matrix">Simple Button matrix</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#custom-buttons">Custom buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#pagination">Pagination</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#calendar">Calendar</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#calendar-with-header">Calendar with header</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#canvas">Canvas</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#drawing-on-the-canvas-and-rotate">Drawing on the Canvas and rotate</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#transparent-canvas-with-chroma-keying">Transparent Canvas with chroma keying</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#chart">Chart</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#line-chart">Line Chart</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#faded-area-line-chart-with-custom-division-lines">Faded area line chart with custom division lines</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#axis-ticks-and-labels-with-scrolling">Axis ticks and labels with scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#show-the-value-of-the-pressed-points">Show the value of the pressed points</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#display-1000-data-points-with-zooming-and-scrolling">Display 1000 data points with zooming and scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#show-cursor-on-the-clicked-point">Show cursor on the clicked point</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#scatter-chart">Scatter chart</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#stacked-area-chart">Stacked area chart</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#checkbox">Checkbox</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-checkboxes">Simple Checkboxes</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#checkboxes-as-radio-buttons">Checkboxes as radio buttons</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#colorwheel">Colorwheel</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-colorwheel">Simple Colorwheel</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#dropdown">Dropdown</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-drop-down-list">Simple Drop down list</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#drop-down-in-four-directions">Drop down in four directions</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#menu">Menu</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#image">Image</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#image-from-variable-and-symbol">Image from variable and symbol</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#image-recoloring">Image recoloring</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#rotate-and-zoom">Rotate and zoom</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#image-offset-and-styling">Image offset and styling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#image-button">Image button</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-image-button">Simple Image button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#keyboard">Keyboard</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#keyboard-with-text-area">Keyboard with text area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#label">Label</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#line-wrap-recoloring-and-scrolling">Line wrap, recoloring and scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#text-shadow">Text shadow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#show-ltr-rtl-and-chinese-texts">Show LTR, RTL and Chinese texts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#draw-label-with-gradient-color">Draw label with gradient color</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#customize-circular-scrolling-animation">Customize circular scrolling animation</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#led">LED</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#led-with-custom-style">LED with custom style</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#line">Line</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-line">Simple Line</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#list">List</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-list">Simple List</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#sorting-a-list-using-up-and-down-buttons">Sorting a List using up and down buttons</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#id2">Menu</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-menu">Simple Menu</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-menu-with-root-btn">Simple Menu with root btn</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-menu-with-custom-header">Simple Menu with custom header</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-menu-with-floating-btn-to-add-new-menu-page">Simple Menu with floating btn to add new menu page</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#complex-menu">Complex Menu</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#meter">Meter</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-meter">Simple meter</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#a-meter-with-multiple-arcs">A meter with multiple arcs</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#a-clock-from-a-meter">A clock from a meter</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#pie-chart">Pie chart</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#message-box">Message box</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-message-box">Simple Message box</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#roller">Roller</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-roller">Simple Roller</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#styling-the-roller">Styling the roller</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#add-fade-mask-to-roller">add fade mask to roller</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#slider">Slider</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-slider">Simple Slider</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#slider-with-custom-style">Slider with custom style</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#slider-with-extended-drawer">Slider with extended drawer</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#span">Span</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#span-with-custom-styles">Span with custom styles</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#spinbox">Spinbox</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-spinbox">Simple Spinbox</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#spinner">Spinner</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-spinner">Simple spinner</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#switch">Switch</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-switch">Simple Switch</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#table">Table</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-table">Simple table</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#lightweighted-list-from-table">Lightweighted list from table</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#tabview">Tabview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-tabview">Simple Tabview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#tabs-on-the-left-styling-and-no-scrolling">Tabs on the left, styling and no scrolling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#textarea">Textarea</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-text-area">Simple Text area</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#text-area-with-password-field">Text area with password field</a></li>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#text-auto-formatting">Text auto-formatting</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#id3">Tabview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#tileview-with-content">Tileview with content</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../examples.html#window">Window</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../examples.html#simple-window">Simple window</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../get-started/index.html">Get started</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../get-started/quick-overview.html">Quick overview</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#get-started-in-a-simulator">Get started in a simulator</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#add-lvgl-into-your-project">Add LVGL into your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#learn-the-basics">Learn the basics</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#widgets">Widgets</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#parts">Parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#states">States</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#themes">Themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#a-button-with-a-label-and-react-on-click-event">A button with a label and react on click event</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#create-styles-from-scratch-for-buttons">Create styles from scratch for buttons</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/quick-overview.html#create-a-slider-and-write-its-value-on-a-label">Create a slider and write its value on a label</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/quick-overview.html#micropython">Micropython</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/platforms/index.html">Platforms</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/platforms/pc-simulator.html">Simulator on PC</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/pc-simulator.html#select-an-ide">Select an IDE</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/pc-simulator.html#set-up-eclipse-cdt">Set-up Eclipse CDT</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/platforms/nxp.html">NXP</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/nxp.html#creating-new-project-with-lvgl">Creating new project with LVGL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/nxp.html#hw-acceleration-for-nxp-imx-rt-platforms">HW acceleration for NXP iMX RT platforms</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/platforms/stm32.html">STM32</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/platforms/espressif.html">Espressif (ESP32 chip series)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/espressif.html#lvgl-demo-project-for-esp32">LVGL demo project for ESP32</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/espressif.html#using-lvgl-in-your-esp-idf-project">Using LVGL in your ESP-IDF project</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/espressif.html#using-lvgl-esp32-drivers-in-esp-idf-project">Using lvgl_esp32_drivers in ESP-IDF project</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/platforms/renesas.html">Renesas</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/renesas.html#creating-new-project-with-lvgl">Creating new project with LVGL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/renesas.html#hw-acceleration-for-renesas-ra6m3-platforms">HW acceleration for Renesas RA6M3 platforms</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/platforms/arduino.html">Arduino</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/arduino.html#get-the-lvgl-arduino-library">Get the LVGL Arduino library</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/arduino.html#set-up-drivers">Set up drivers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/arduino.html#configure-lvgl">Configure LVGL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/arduino.html#initialize-and-run-lvgl">Initialize and run LVGL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/arduino.html#use-the-examples-and-demos">Use the examples and demos</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/arduino.html#debugging-and-logging">Debugging and logging</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/platforms/tasmota-berry.html">Tasmota and berry</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/tasmota-berry.html#what-is-tasmota">What is Tasmota?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/tasmota-berry.html#what-is-berry">What is Berry?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/tasmota-berry.html#why-lvgl-tasmota-berry">Why LVGL + Tasmota + Berry?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/tasmota-berry.html#so-what-does-it-look-like">So what does it look like?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/tasmota-berry.html#how-can-i-use-it">How can I use it?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/tasmota-berry.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/platforms/cmake.html">CMake</a><ul>
<li class="toctree-l4"><a class="reference external" href="https://docs.espressif.com/projects/esp-idf/en/v3.3/get-started-cmake/index.html">Espressif (ESP32)</a></li>
<li class="toctree-l4"><a class="reference external" href="https://docs.micropython.org/en/v1.15/develop/cmodules.html">MicroPython</a></li>
<li class="toctree-l4"><a class="reference external" href="https://docs.zephyrproject.org/latest/guides/zephyr_cmake_package.html">Zephyr</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/cmake.html#prerequisites">Prerequisites</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/cmake.html#building-lvgl-with-cmake">Building LVGL with CMake</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/cmake.html#building-lvgl-examples-with-cmake">Building LVGL examples with CMake</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/platforms/cmake.html#building-lvgl-drivers-and-demos-with-cmake">Building LVGL drivers and demos with CMake</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/platforms/cmake.html#build-shared-libraries-with-cmake">Build shared libraries with CMake</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/os/index.html">(RT)OS</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/os/nuttx.html">NuttX RTOS</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/os/nuttx.html#what-is-nuttx">What is NuttX?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/os/nuttx.html#why-nuttx-lvgl">Why NuttX + LVGL?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/os/nuttx.html#how-to-get-started-with-nuttx-and-lvgl">How to get started with NuttX and LVGL?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/os/nuttx.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/os/rt-thread.html">RT-Thread RTOS</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/os/rt-thread.html#what-is-rt-thread">What is RT-Thread?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/os/rt-thread.html#how-to-run-lvgl-on-rt-thread">How to run LVGL on RT-Thread?</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/os/freertos.html">FreeRTOS</a></li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/os/zephyr.html">Zephyr</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../get-started/bindings/index.html">Bindings</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../get-started/bindings/micropython.html">Micropython</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../get-started/bindings/micropython.html#what-is-micropython">What is Micropython?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/bindings/micropython.html#why-micropython-lvgl">Why Micropython + LVGL?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/bindings/micropython.html#so-what-does-it-look-like">So what does it look like?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/bindings/micropython.html#how-can-i-use-it">How can I use it?</a></li>
<li class="toctree-l4"><a class="reference internal" href="../get-started/bindings/micropython.html#where-can-i-find-more-information">Where can I find more information?</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../get-started/bindings/cpp.html">Cpp</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../porting/index.html">Porting</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../porting/project.html">Set up a project</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#get-the-library">Get the library</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#add-lvgl-to-your-project">Add lvgl to your project</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/project.html#automatically-add-files">Automatically add files</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/project.html#make-and-cmake">Make and CMake</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/project.html#other-platforms-and-tools">Other platforms and tools</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/project.html#demos-and-examples">Demos and Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#configuration-file">Configuration file</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/project.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/display.html">Display interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#draw-buffer">Draw buffer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#buffering-modes">Buffering modes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#one-buffer">One buffer</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#two-buffers">Two buffers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#full-refresh">Full refresh</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#direct-mode">Direct mode</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#display-driver">Display driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#mandatory-fields">Mandatory fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#optional-fields">Optional fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#other-options">Other options</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#rotation">Rotation</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/display.html#decoupling-the-display-refresh-timer">Decoupling the display refresh timer</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/indev.html">Input device interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#types-of-input-devices">Types of input devices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#touchpad-mouse-or-any-pointer">Touchpad, mouse or any pointer</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#keypad-or-keyboard">Keypad or keyboard</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#encoder">Encoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#button">Button</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#parameters">Parameters</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#feedback">Feedback</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#associating-with-a-display">Associating with a display</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/indev.html#buffered-reading">Buffered reading</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#further-reading">Further reading</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/indev.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/tick.html">Tick interface</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/tick.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/timer-handler.html">Timer Handler</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/sleep.html">Sleep management</a></li>
<li class="toctree-l2"><a class="reference internal" href="../porting/os.html">Operating system and interrupts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#tasks-and-threads">Tasks and threads</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/os.html#interrupts">Interrupts</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/log.html">Logging</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#log-level">Log level</a></li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#printing-logs">Printing logs</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#logging-with-printf">Logging with printf</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/log.html#custom-log-function">Custom log function</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/log.html#add-logs">Add logs</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../porting/gpu.html">Add custom GPU</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../porting/gpu.html#draw-context">Draw context</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/gpu.html#fields">Fields</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/gpu.html#initialization">Initialization</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/gpu.html#software-renderer">Software renderer</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/gpu.html#blend-callback">Blend callback</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/gpu.html#extend-the-software-renderer">Extend the software renderer</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../porting/gpu.html#new-blend-callback">New blend callback</a></li>
<li class="toctree-l4"><a class="reference internal" href="../porting/gpu.html#new-rectangle-drawer">New rectangle drawer</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../porting/gpu.html#fully-custom-draw-engine">Fully custom draw engine</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1 current"><a class="reference internal" href="index.html">Overview</a><ul class="current">
<li class="toctree-l2"><a class="reference internal" href="object.html">Objects</a><ul>
<li class="toctree-l3"><a class="reference internal" href="object.html#attributes">Attributes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#basic-attributes">Basic attributes</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#specific-attributes">Specific attributes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#working-mechanisms">Working mechanisms</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#parent-child-structure">Parent-child structure</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#moving-together">Moving together</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#visibility-only-on-the-parent">Visibility only on the parent</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#create-and-delete-objects">Create and delete objects</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="object.html#create-screens">Create screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#get-the-active-screen">Get the active screen</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#load-screens">Load screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#layers">Layers</a></li>
<li class="toctree-l4"><a class="reference internal" href="object.html#handling-multiple-displays">Handling multiple displays</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="object.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="object.html#states">States</a></li>
<li class="toctree-l3"><a class="reference internal" href="object.html#snapshot">Snapshot</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="coords.html">Positions, sizes, and layouts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="coords.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#units">Units</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#boxing-model">Boxing model</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#important-notes">Important notes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#position">Position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#simple-way">Simple way</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#align">Align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#size">Size</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#id1">Simple way</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#using-styles">Using styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#translation">Translation</a></li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#transformation">Transformation</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#min-and-max-size">Min and Max size</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#layout">Layout</a><ul>
<li class="toctree-l4"><a class="reference internal" href="coords.html#id2">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#built-in-layout">Built-in layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="coords.html#adding-new-layouts">Adding new layouts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="coords.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="style.html">Styles</a><ul>
<li class="toctree-l3"><a class="reference internal" href="style.html#states">States</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#cascading-styles">Cascading styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#inheritance">Inheritance</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#forced-value-inheritance-default-value">Forced value inheritance/default value</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#parts">Parts</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#initialize-styles-and-set-get-properties">Initialize styles and set/get properties</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#add-and-remove-styles-to-a-widget">Add and remove styles to a widget</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#add-styles">Add styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#remove-styles">Remove styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#report-style-changes">Report style changes</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#get-a-property-s-value-on-an-object">Get a property's value on an object</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#local-styles">Local styles</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#properties">Properties</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#typical-background-properties">Typical background properties</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#transitions">Transitions</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#opacity-blend-modes-and-transformations">Opacity, Blend modes and Transformations</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#color-filter">Color filter</a></li>
<li class="toctree-l3"><a class="reference internal" href="style.html#themes">Themes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#extending-themes">Extending themes</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style.html#size-styles">Size styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#background-styles">Background styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#border-styles">Border styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#outline-styles">Outline styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#shadow-styles">Shadow styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#image-styles">Image styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#arc-styles">Arc styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#text-styles">Text styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#line-styles">Line styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#transition">Transition</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#using-multiple-styles">Using multiple styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#id1">Local styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#add-styles-to-parts-and-states">Add styles to parts and states</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#extending-the-current-theme">Extending the current theme</a></li>
<li class="toctree-l4"><a class="reference internal" href="style.html#opacity-and-transformations">Opacity and Transformations</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="style-props.html">Style properties</a><ul>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#size-and-position">Size and position</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#width">width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#min-width">min_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#max-width">max_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#height">height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#min-height">min_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#max-height">max_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#x">x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#y">y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#align">align</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-width">transform_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-height">transform_height</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#translate-x">translate_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#translate-y">translate_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-zoom">transform_zoom</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-angle">transform_angle</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-pivot-x">transform_pivot_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transform-pivot-y">transform_pivot_y</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#padding">Padding</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-top">pad_top</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-bottom">pad_bottom</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-left">pad_left</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-right">pad_right</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-row">pad_row</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#pad-column">pad_column</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#background">Background</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-color">bg_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-opa">bg_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-color">bg_grad_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-dir">bg_grad_dir</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-main-stop">bg_main_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad-stop">bg_grad_stop</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-grad">bg_grad</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-dither-mode">bg_dither_mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-src">bg_img_src</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-opa">bg_img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-recolor">bg_img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-recolor-opa">bg_img_recolor_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#bg-img-tiled">bg_img_tiled</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#border">Border</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-color">border_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-opa">border_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-width">border_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-side">border_side</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#border-post">border_post</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#outline">Outline</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-width">outline_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-color">outline_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-opa">outline_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#outline-pad">outline_pad</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#shadow">Shadow</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-width">shadow_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-ofs-x">shadow_ofs_x</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-ofs-y">shadow_ofs_y</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-spread">shadow_spread</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-color">shadow_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#shadow-opa">shadow_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#image">Image</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-opa">img_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-recolor">img_recolor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#img-recolor-opa">img_recolor_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#line">Line</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-width">line_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-dash-width">line_dash_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-dash-gap">line_dash_gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-rounded">line_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-color">line_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#line-opa">line_opa</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#arc">Arc</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-width">arc_width</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-rounded">arc_rounded</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-color">arc_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-opa">arc_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#arc-img-src">arc_img_src</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#text">Text</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-color">text_color</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-opa">text_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-font">text_font</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-letter-space">text_letter_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-line-space">text_line_space</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-decor">text_decor</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#text-align">text_align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="style-props.html#miscellaneous">Miscellaneous</a><ul>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#radius">radius</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#clip-corner">clip_corner</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#opa">opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#opa-layered">opa_layered</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#color-filter-dsc">color_filter_dsc</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#color-filter-opa">color_filter_opa</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#anim">anim</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#anim-time">anim_time</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#anim-speed">anim_speed</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#transition">transition</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#blend-mode">blend_mode</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#layout">layout</a></li>
<li class="toctree-l4"><a class="reference internal" href="style-props.html#base-dir">base_dir</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="scroll.html">Scroll</a><ul>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scrollbar">Scrollbar</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#events">Events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#basic-example">Basic example</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#features-of-scrolling">Features of scrolling</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scrollable">Scrollable</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-chain">Scroll chain</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-momentum">Scroll momentum</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#elastic-scroll">Elastic scroll</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#snapping">Snapping</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-one">Scroll one</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#scroll-on-focus">Scroll on focus</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#scroll-manually">Scroll manually</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#self-size">Self size</a></li>
<li class="toctree-l3"><a class="reference internal" href="scroll.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#nested-scrolling">Nested scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#id1">Snapping</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#floating-button">Floating button</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#styling-the-scrollbars">Styling the scrollbars</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#right-to-left-scrolling">Right to left scrolling</a></li>
<li class="toctree-l4"><a class="reference internal" href="scroll.html#translate-on-scroll">Translate on scroll</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="layer.html">Layers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="layer.html#order-of-creation">Order of creation</a></li>
<li class="toctree-l3"><a class="reference internal" href="layer.html#change-order">Change order</a></li>
<li class="toctree-l3"><a class="reference internal" href="layer.html#top-and-sys-layers">Top and sys layers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="event.html">Events</a><ul>
<li class="toctree-l3"><a class="reference internal" href="event.html#add-events-to-the-object">Add events to the object</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#remove-event-s-from-an-object">Remove event(s) from an object</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#event-codes">Event codes</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#input-device-events">Input device events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#drawing-events">Drawing events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#other-events">Other events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#special-events">Special events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#custom-events">Custom events</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="event.html#sending-events">Sending events</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#refresh-event">Refresh event</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="event.html#fields-of-lv-event-t">Fields of lv_event_t</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#event-bubbling">Event bubbling</a></li>
<li class="toctree-l3"><a class="reference internal" href="event.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="event.html#button-click-event">Button click event</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#handle-multiple-events">Handle multiple events</a></li>
<li class="toctree-l4"><a class="reference internal" href="event.html#id1">Event bubbling</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="indev.html">Input devices</a><ul>
<li class="toctree-l3"><a class="reference internal" href="indev.html#pointers">Pointers</a><ul>
<li class="toctree-l4"><a class="reference internal" href="indev.html#cursor">Cursor</a></li>
<li class="toctree-l4"><a class="reference internal" href="indev.html#gestures">Gestures</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="indev.html#keypad-and-encoder">Keypad and encoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="indev.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="indev.html#styling">Styling</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="indev.html#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="indev.html#input-device">Input device</a></li>
<li class="toctree-l4"><a class="reference internal" href="indev.html#id1">Groups</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="display.html">Displays</a><ul>
<li class="toctree-l3"><a class="reference internal" href="display.html#multiple-display-support">Multiple display support</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#using-only-one-display">Using only one display</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#mirror-display">Mirror display</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#split-image">Split image</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#screens">Screens</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#transparent-screens">Transparent screens</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#features-of-displays">Features of displays</a><ul>
<li class="toctree-l4"><a class="reference internal" href="display.html#inactivity">Inactivity</a></li>
<li class="toctree-l4"><a class="reference internal" href="display.html#background">Background</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="display.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="color.html">Colors</a><ul>
<li class="toctree-l3"><a class="reference internal" href="color.html#creating-colors">Creating colors</a><ul>
<li class="toctree-l4"><a class="reference internal" href="color.html#rgb">RGB</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#hsv">HSV</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#palette">Palette</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#modify-and-mix-colors">Modify and mix colors</a></li>
<li class="toctree-l4"><a class="reference internal" href="color.html#built-in-colors">Built-in colors</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="color.html#opacity">Opacity</a></li>
<li class="toctree-l3"><a class="reference internal" href="color.html#color-types">Color types</a><ul>
<li class="toctree-l4"><a class="reference internal" href="color.html#convert-color">Convert color</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="color.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="font.html">Fonts</a><ul>
<li class="toctree-l3"><a class="reference internal" href="font.html#unicode-support">Unicode support</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#built-in-fonts">Built-in fonts</a><ul>
<li class="toctree-l4"><a class="reference internal" href="font.html#normal-fonts">Normal fonts</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#special-fonts">Special fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="font.html#special-features">Special features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="font.html#bidirectional-support">Bidirectional support</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#arabic-and-persian-support">Arabic and Persian support</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#subpixel-rendering">Subpixel rendering</a></li>
<li class="toctree-l4"><a class="reference internal" href="font.html#compressed-fonts">Compressed fonts</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-a-new-font">Add a new font</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-new-symbols">Add new symbols</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#load-a-font-at-run-time">Load a font at run-time</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#add-a-new-font-engine">Add a new font engine</a></li>
<li class="toctree-l3"><a class="reference internal" href="font.html#use-font-fallback">Use font fallback</a></li>
</ul>
</li>
<li class="toctree-l2 current"><a class="current reference internal" href="#">Images</a><ul>
<li class="toctree-l3"><a class="reference internal" href="#store-images">Store images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#variables">Variables</a></li>
<li class="toctree-l4"><a class="reference internal" href="#files">Files</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#color-formats">Color formats</a></li>
<li class="toctree-l3"><a class="reference internal" href="#add-and-use-images">Add and use images</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#online-converter">Online converter</a></li>
<li class="toctree-l4"><a class="reference internal" href="#manually-create-an-image">Manually create an image</a></li>
<li class="toctree-l4"><a class="reference internal" href="#use-images">Use images</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#image-decoder">Image decoder</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#custom-image-formats">Custom image formats</a></li>
<li class="toctree-l4"><a class="reference internal" href="#register-an-image-decoder">Register an image decoder</a></li>
<li class="toctree-l4"><a class="reference internal" href="#manually-use-an-image-decoder">Manually use an image decoder</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#image-caching">Image caching</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#cache-size">Cache size</a></li>
<li class="toctree-l4"><a class="reference internal" href="#value-of-images">Value of images</a></li>
<li class="toctree-l4"><a class="reference internal" href="#memory-usage">Memory usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="#clean-the-cache">Clean the cache</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="#api">API</a><ul>
<li class="toctree-l4"><a class="reference internal" href="#image-buffer">Image buffer</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="file-system.html">File system</a><ul>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#ready-to-use-drivers">Ready to use drivers</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#adding-a-driver">Adding a driver</a><ul>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#registering-a-driver">Registering a driver</a></li>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#implementing-the-callbacks">Implementing the callbacks</a></li>
<li class="toctree-l4"><a class="reference internal" href="file-system.html#other-callbacks">Other callbacks</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#usage-example">Usage example</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#use-drives-for-images">Use drives for images</a></li>
<li class="toctree-l3"><a class="reference internal" href="file-system.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="animation.html">Animations</a><ul>
<li class="toctree-l3"><a class="reference internal" href="animation.html#create-an-animation">Create an animation</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#animation-path">Animation path</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#speed-vs-time">Speed vs time</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#delete-animations">Delete animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#timeline">Timeline</a></li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#examples">Examples</a><ul>
<li class="toctree-l4"><a class="reference internal" href="animation.html#start-animation-on-an-event">Start animation on an event</a></li>
<li class="toctree-l4"><a class="reference internal" href="animation.html#playback-animation">Playback animation</a></li>
<li class="toctree-l4"><a class="reference internal" href="animation.html#animation-timeline">Animation timeline</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="animation.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="timer.html">Timers</a><ul>
<li class="toctree-l3"><a class="reference internal" href="timer.html#create-a-timer">Create a timer</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#ready-and-reset">Ready and Reset</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#set-parameters">Set parameters</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#repeat-count">Repeat count</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#measure-idle-time">Measure idle time</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#asynchronous-calls">Asynchronous calls</a></li>
<li class="toctree-l3"><a class="reference internal" href="timer.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="drawing.html">Drawing</a><ul>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#mechanism-of-screen-refreshing">Mechanism of screen refreshing</a></li>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#masking">Masking</a><ul>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#using-masks">Using masks</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="drawing.html#hook-drawing">Hook drawing</a><ul>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#main-drawing">Main drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#post-drawing">Post drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#part-drawing">Part drawing</a></li>
<li class="toctree-l4"><a class="reference internal" href="drawing.html#others">Others</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="renderers/index.html">Renderers and GPUs</a><ul>
<li class="toctree-l3"><a class="reference internal" href="renderers/sw.html">Software renderer</a></li>
<li class="toctree-l3"><a class="reference internal" href="renderers/sdl.html">SDL renderer</a></li>
<li class="toctree-l3"><a class="reference internal" href="renderers/arm-2d.html">Arm-2D GPU</a><ul>
<li class="toctree-l4"><a class="reference internal" href="renderers/arm-2d.html#how-to-use">How to Use</a></li>
<li class="toctree-l4"><a class="reference internal" href="renderers/arm-2d.html#design-considerations">Design Considerations</a></li>
<li class="toctree-l4"><a class="reference internal" href="renderers/arm-2d.html#examples">Examples</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="renderers/pxp-vglite.html">NXP PXP and VGLite GPU</a></li>
<li class="toctree-l3"><a class="reference internal" href="renderers/dma2d.html">DMA2D GPU</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="new_widget.html">New widget</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../widgets/index.html">Widgets</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../widgets/obj.html">Base object (lv_obj)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#overview">Overview</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#coordinates">Coordinates</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#parents-and-children">Parents and children</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#display-and-screens">Display and Screens</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#styles">Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#flags">Flags</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#groups">Groups</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#extended-click-area">Extended click area</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#id1">Events</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#keys">Keys</a></li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#base-objects-with-custom-styles">Base objects with custom styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/obj.html#make-an-object-draggable">Make an object draggable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/obj.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/core/index.html">Core widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/arc.html">Arc (lv_arc)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/arc.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/bar.html">Bar (lv_bar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/bar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btn.html">Button (lv_btn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/btnmatrix.html">Button matrix (lv_btnmatrix)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/btnmatrix.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/canvas.html">Canvas (lv_canvas)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/canvas.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/checkbox.html">Checkbox (lv_checkbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/checkbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/dropdown.html">Drop-down list (lv_dropdown)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#id1">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/dropdown.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/img.html">Image (lv_img)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#transformations">Transformations</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/img.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/label.html">Label (lv_label)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/label.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/line.html">Line (lv_line)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/line.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/roller.html">Roller (lv_roller)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/roller.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/slider.html">Slider (lv_slider)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/slider.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/switch.html">Switch (lv_switch)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/switch.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/table.html">Table (lv_table)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/table.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/core/textarea.html">Text area (lv_textarea)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/core/textarea.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../widgets/extra/index.html">Extra widgets</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/animimg.html">Animation Image (lv_animimg)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/animimg.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/animimg.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/animimg.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/animimg.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/animimg.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/animimg.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/animimg.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/calendar.html">Calendar (lv_calendar)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#headers">Headers</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/calendar.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/chart.html">Chart (lv_chart)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/chart.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/colorwheel.html">Color wheel (lv_colorwheel)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/colorwheel.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/imgbtn.html">Image button (lv_imgbtn)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/imgbtn.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/keyboard.html">Keyboard (lv_keyboard)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#examples">Examples</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/keyboard.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/led.html">LED (lv_led)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/led.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/list.html">List (lv_list)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/list.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/menu.html">Menu (lv_menu)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/menu.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/menu.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/menu.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/menu.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/menu.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/menu.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/menu.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/meter.html">Meter (lv_meter)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/meter.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/msgbox.html">Message box (lv_msgbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/msgbox.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/span.html">Span (lv_span)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/span.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinbox.html">Spinbox (lv_spinbox)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#api">API</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinbox.html#id1">Example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/spinner.html">Spinner (lv_spinner)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/spinner.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tabview.html">Tabview (lv_tabview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tabview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/tileview.html">Tile view (lv_tileview)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/tileview.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../widgets/extra/win.html">Window (lv_win)</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#overview">Overview</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#parts-and-styles">Parts and Styles</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#usage">Usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#get-the-parts">Get the parts</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#events">Events</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#keys">Keys</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#example">Example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../widgets/extra/win.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../layouts/index.html">Layouts</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../layouts/flex.html">Flex</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-flow">Flex flow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-align">Flex align</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#flex-grow">Flex grow</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#style-interface">Style interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#internal-padding">Internal padding</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#rtl">RTL</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#new-track">New track</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#a-simple-row-and-a-column-layout-with-flexbox">A simple row and a column layout with flexbox</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#arrange-items-in-rows-with-wrap-and-even-spacing">Arrange items in rows with wrap and even spacing</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#demonstrate-flex-grow">Demonstrate flex grow</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#id1">Demonstrate flex grow.</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#demonstrate-column-and-row-gap-style-properties">Demonstrate column and row gap style properties</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/flex.html#rtl-base-direction-changes-order-of-the-items">RTL base direction changes order of the items</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/flex.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../layouts/grid.html">Grid</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#terms">Terms</a></li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#simple-interface">Simple interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-descriptors">Grid descriptors</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-items">Grid items</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#grid-align">Grid align</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#style-interface">Style interface</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#internal-padding">Internal padding</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#other-features">Other features</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#rtl">RTL</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#a-simple-grid">A simple grid</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#demonstrate-cell-placement-and-span">Demonstrate cell placement and span</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#demonstrate-grid-s-free-unit">Demonstrate grid's &quot;free unit&quot;</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#demonstrate-track-placement">Demonstrate track placement</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#demonstrate-column-and-row-gap">Demonstrate column and row gap</a></li>
<li class="toctree-l4"><a class="reference internal" href="../layouts/grid.html#demonstrate-rtl-direction-on-grid">Demonstrate RTL direction on grid</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../layouts/grid.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../libs/index.html">3rd party libraries</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../libs/fsdrv.html">File System Interfaces</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../libs/fsdrv.html#built-in-wrappers">Built in wrappers</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../libs/fsdrv.html#fatfs">FATFS</a></li>
<li class="toctree-l4"><a class="reference internal" href="../libs/fsdrv.html#littlefs">LittleFS</a></li>
<li class="toctree-l4"><a class="reference internal" href="../libs/fsdrv.html#stdio">STDIO</a></li>
<li class="toctree-l4"><a class="reference internal" href="../libs/fsdrv.html#posix">POSIX</a></li>
<li class="toctree-l4"><a class="reference internal" href="../libs/fsdrv.html#win32">WIN32</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../libs/fsdrv.html#usage">Usage</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../libs/bmp.html">BMP decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../libs/bmp.html#limitations">Limitations</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/bmp.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../libs/bmp.html#open-a-bmp-image-from-file">Open a BMP image from file</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../libs/bmp.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../libs/sjpg.html">JPG decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../libs/sjpg.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/sjpg.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/sjpg.html#converter">Converter</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../libs/sjpg.html#converting-jpg-to-c-array">Converting JPG to C array</a></li>
<li class="toctree-l4"><a class="reference internal" href="../libs/sjpg.html#converting-jpg-to-sjpg">Converting JPG to SJPG</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../libs/sjpg.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../libs/sjpg.html#load-an-sjpg-image">Load an SJPG image</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../libs/sjpg.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../libs/png.html">PNG decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../libs/png.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../libs/png.html#open-a-png-image-from-file-and-variable">Open a PNG image from file and variable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../libs/png.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../libs/gif.html">GIF decoder</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../libs/gif.html#convert-gif-files-to-c-array">Convert GIF files to C array</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/gif.html#use-gif-images-from-file">Use GIF images from file</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/gif.html#memory-requirements">Memory requirements</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/gif.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../libs/gif.html#open-a-gif-image-from-file-and-variable">Open a GIF image from file and variable</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../libs/gif.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../libs/freetype.html">FreeType support</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../libs/freetype.html#install-freetype">Install FreeType</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/freetype.html#add-freetype-to-your-project">Add FreeType to your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/freetype.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/freetype.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../libs/freetype.html#open-a-front-with-freetype">Open a front with FreeType</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../libs/freetype.html#learn-more">Learn more</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/freetype.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../libs/tiny_ttf.html">Tiny TTF font engine</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../libs/tiny_ttf.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/tiny_ttf.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../libs/qrcode.html">QR code</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../libs/qrcode.html#get-started">Get started</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/qrcode.html#notes">Notes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/qrcode.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../libs/qrcode.html#create-a-qr-code">Create a QR Code</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../libs/qrcode.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../libs/rlottie.html">Lottie player</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../libs/rlottie.html#build-rlottie">Build Rlottie</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/rlottie.html#usage">Usage</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../libs/rlottie.html#use-rlottie-from-file">Use Rlottie from file</a></li>
<li class="toctree-l4"><a class="reference internal" href="../libs/rlottie.html#use-rlottie-from-raw-string-data">Use Rlottie from raw string data</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../libs/rlottie.html#getting-animations">Getting animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/rlottie.html#controlling-animations">Controlling animations</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/rlottie.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../libs/rlottie.html#load-a-lottie-animation-from-raw-data">Load a Lottie animation from raw data</a></li>
<li class="toctree-l4"><a class="reference internal" href="../libs/rlottie.html#load-a-lottie-animation-from-a-file">Load a Lottie animation from a file</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../libs/rlottie.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../libs/ffmpeg.html">FFmpeg support</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../libs/ffmpeg.html#install-ffmpeg">Install FFmpeg</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/ffmpeg.html#add-ffmpeg-to-your-project">Add FFmpeg to your project</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/ffmpeg.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../libs/ffmpeg.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../libs/ffmpeg.html#decode-image">Decode image</a></li>
<li class="toctree-l4"><a class="reference internal" href="../libs/ffmpeg.html#decode-video">Decode video</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../libs/ffmpeg.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../others/index.html">Others</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../others/snapshot.html">Snapshot</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../others/snapshot.html#usage">Usage</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../others/snapshot.html#free-the-image">Free the Image</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/snapshot.html#use-existing-buffer">Use Existing Buffer</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../others/snapshot.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../others/snapshot.html#simple-snapshot-example">Simple snapshot example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../others/snapshot.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../others/monkey.html">Monkey</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../others/monkey.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../others/monkey.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../others/monkey.html#touchpad-monkey-example">Touchpad monkey example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/monkey.html#encoder-monkey-example">Encoder monkey example</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/monkey.html#button-monkey-example">Button monkey example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../others/monkey.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../others/gridnav.html">Grid navigation</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../others/gridnav.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../others/gridnav.html#focusable-objects">Focusable objects</a></li>
<li class="toctree-l3"><a class="reference internal" href="../others/gridnav.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../others/gridnav.html#basic-grid-navigation">Basic grid navigation</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/gridnav.html#grid-navigation-on-a-list">Grid navigation on a list</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/gridnav.html#nested-grid-navigations">Nested grid navigations</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/gridnav.html#simple-navigation-on-a-list-widget">Simple navigation on a list widget</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../others/gridnav.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../others/fragment.html">Fragment</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../others/fragment.html#usage">Usage</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../others/fragment.html#create-fragment-class">Create Fragment Class</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/fragment.html#use-lv-fragment-manager">Use <code class="docutils literal notranslate"><span class="pre">lv_fragment_manager</span></code></a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/fragment.html#fragment-based-navigation">Fragment Based Navigation</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../others/fragment.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../others/fragment.html#basic-fragment-usage">Basic fragment usage</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/fragment.html#stack-navigation-example">Stack navigation example</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../others/fragment.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../others/msg.html">Messaging</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../others/msg.html#ids">IDs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../others/msg.html#send-message">Send message</a></li>
<li class="toctree-l3"><a class="reference internal" href="../others/msg.html#subscribe-to-a-message">Subscribe to a message</a></li>
<li class="toctree-l3"><a class="reference internal" href="../others/msg.html#subscribe-with-an-lv-obj">Subscribe with an lv_obj</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../others/msg.html#unsubscribe">Unsubscribe</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../others/msg.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../others/msg.html#slider-to-label-messaging">Slider to label messaging</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/msg.html#handling-login-and-its-states">Handling login and its states</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/msg.html#setting-the-same-value-from-many-sources">Setting the same value from many sources</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../others/msg.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../others/imgfont.html">Image font (imgfont)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../others/imgfont.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../others/imgfont.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../others/imgfont.html#use-emojis-in-a-text">Use emojis in a text.</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../others/imgfont.html#api">API</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../others/ime_pinyin.html">Pinyin IME</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../others/ime_pinyin.html#usage">Usage</a></li>
<li class="toctree-l3"><a class="reference internal" href="../others/ime_pinyin.html#custom-dictionary">Custom dictionary</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../others/ime_pinyin.html#dictionary-format">Dictionary format</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/ime_pinyin.html#apply-new-dictionary">Apply new dictionary</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../others/ime_pinyin.html#input-modes">Input modes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../others/ime_pinyin.html#example">Example</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../others/ime_pinyin.html#pinyin-ime-26-key-input">Pinyin IME 26 key input</a></li>
<li class="toctree-l4"><a class="reference internal" href="../others/ime_pinyin.html#pinyin-ime-9-key-input">Pinyin IME 9 key input</a></li>
</ul>
</li>
<li class="toctree-l3"><a class="reference internal" href="../others/ime_pinyin.html#api">API</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CONTRIBUTING.html">Contributing</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#introduction">Introduction</a></li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#pull-request">Pull request</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-github">From GitHub</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#from-command-line">From command line</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#commit-message-format">Commit message format</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#developer-certification-of-origin-dco">Developer Certification of Origin (DCO)</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#overview">Overview</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#accepted-licenses-and-copyright-notices">Accepted licenses and copyright notices</a><ul>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#your-own-work">Your own work</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-code-from-online-source">Use code from online source</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-mit-licensed-code">Use MIT licensed code</a></li>
<li class="toctree-l4"><a class="reference internal" href="../CONTRIBUTING.html#use-gpl-licensed-code">Use GPL licensed code</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="../CONTRIBUTING.html#ways-to-contribute">Ways to contribute</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#give-lvgl-a-star">Give LVGL a Star</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#tell-what-you-have-achieved">Tell what you have achieved</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#write-examples">Write examples</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#improve-the-docs">Improve the docs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#report-bugs">Report bugs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#send-fixes">Send fixes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#join-the-conversations-in-the-forum">Join the conversations in the Forum</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#add-features">Add features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#become-a-maintainer">Become a maintainer</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CONTRIBUTING.html#move-your-project-repository-under-lvgl-organization">Move your project repository under LVGL organization</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../CHANGELOG.html">Changelog</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../CHANGELOG.html#v8-4-0-19-march-2024">v8.4.0 19 March 2024</a><ul>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#breaking-changes">Breaking Changes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#architectural">Architectural</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#new-features">New Features</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#performance">Performance</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#fixes">Fixes</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#docs">Docs</a></li>
<li class="toctree-l3"><a class="reference internal" href="../CHANGELOG.html#others">Others</a></li>
</ul>
</li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="../ROADMAP.html">Roadmap</a><ul>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#v8-2">v8.2</a></li>
<li class="toctree-l2"><a class="reference internal" href="../ROADMAP.html#ideas">Ideas</a></li>
</ul>
</li>
</ul>

            
          
        </div>
        
      </div>
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

      
      <nav class="wy-nav-top" aria-label="top navigation">
        
          <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
          <a href="../index.html">LVGL</a>
        
      </nav>


      <div class="wy-nav-content">
        
        <div class="rst-content">
        
          

















<div role="navigation" aria-label="breadcrumbs navigation">

  <ul class="wy-breadcrumbs">
    
      <li><a href="../index.html" class="icon icon-home"></a> &raquo;</li>
        
          <li><a href="index.html">Overview</a> &raquo;</li>
        
      <li>Images</li>
    
    
      <li class="wy-breadcrumbs-aside">
        
          
            
              <a href="https://github.com/lvgl/lvgl/blob/d30df363ff69b9ad9706a533764a577b7ed9cc3e/docs/overview/image.md" class="fa fa-github"> Edit on GitHub</a>
            
          
        
      </li>
    
  </ul>

  
  <hr/>
</div>
          <div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
           <div itemprop="articleBody">
            
  <div class="section" id="images">
<h1>Images<a class="headerlink" href="#images" title="Permalink to this headline">¶</a></h1>
<p>An image can be a file or a variable which stores the bitmap itself and some metadata.</p>
<div class="section" id="store-images">
<h2>Store images<a class="headerlink" href="#store-images" title="Permalink to this headline">¶</a></h2>
<p>You can store images in two places</p>
<ul class="simple">
<li><p>as a variable in internal memory (RAM or ROM)</p></li>
<li><p>as a file</p></li>
</ul>
<div class="section" id="variables">
<h3>Variables<a class="headerlink" href="#variables" title="Permalink to this headline">¶</a></h3>
<p>Images stored internally in a variable are composed mainly of an <code class="docutils literal notranslate"><span class="pre">lv_img_dsc_t</span></code> structure with the following fields:</p>
<ul class="simple">
<li><p><strong>header</strong></p>
<ul>
<li><p><em>cf</em> Color format. See <a class="reference external" href="#color-format">below</a></p></li>
<li><p><em>w</em> width in pixels (&lt;= 2048)</p></li>
<li><p><em>h</em> height in pixels (&lt;= 2048)</p></li>
<li><p><em>always zero</em> 3 bits which need to be always zero</p></li>
<li><p><em>reserved</em> reserved for future use</p></li>
</ul>
</li>
<li><p><strong>data</strong> pointer to an array where the image itself is stored</p></li>
<li><p><strong>data_size</strong> length of <code class="docutils literal notranslate"><span class="pre">data</span></code> in bytes</p></li>
</ul>
<p>These are usually stored within a project as C files. They are linked into the resulting executable like any other constant data.</p>
</div>
<div class="section" id="files">
<h3>Files<a class="headerlink" href="#files" title="Permalink to this headline">¶</a></h3>
<p>To deal with files you need to add a storage <em>Drive</em> to LVGL. In short, a <em>Drive</em> is a collection of functions (<em>open</em>, <em>read</em>, <em>close</em>, etc.) registered in LVGL to make file operations.
You can add an interface to a standard file system (FAT32 on SD card) or you create your simple file system to read data from an SPI Flash memory.
In every case, a <em>Drive</em> is just an abstraction to read and/or write data to memory.
See the <a class="reference internal" href="file-system.html"><span class="doc">File system</span></a> section to learn more.</p>
<p>Images stored as files are not linked into the resulting executable, and must be read into RAM before being drawn. As a result, they are not as resource-friendly as images linked at compile time. However, they are easier to replace without needing to rebuild the main program.</p>
</div>
</div>
<div class="section" id="color-formats">
<h2>Color formats<a class="headerlink" href="#color-formats" title="Permalink to this headline">¶</a></h2>
<p>Various built-in color formats are supported:</p>
<ul class="simple">
<li><p><strong>LV_IMG_CF_TRUE_COLOR</strong> Simply stores the RGB colors (in whatever color depth LVGL is configured for).</p></li>
<li><p><strong>LV_IMG_CF_TRUE_COLOR_ALPHA</strong> Like <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_TRUE_COLOR</span></code> but it also adds an alpha (transparency) byte for every pixel.</p></li>
<li><p><strong>LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED</strong> Like <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_TRUE_COLOR</span></code> but if a pixel has the <code class="docutils literal notranslate"><span class="pre">LV_COLOR_TRANSP</span></code> color (set in <em>lv_conf.h</em>) it will be transparent.</p></li>
<li><p><strong>LV_IMG_CF_INDEXED_1/2/4/8BIT</strong> Uses a palette with 2, 4, 16 or 256 colors and stores each pixel in 1, 2, 4 or 8 bits.</p></li>
<li><p><strong>LV_IMG_CF_ALPHA_1/2/4/8BIT</strong> <strong>Only stores the Alpha value with 1, 2, 4 or 8 bits.</strong> The pixels take the color of <code class="docutils literal notranslate"><span class="pre">style.img_recolor</span></code> and the set opacity. The source image has to be an alpha channel. This is ideal for bitmaps similar to fonts where the whole image is one color that can be altered.</p></li>
</ul>
<p>The bytes of <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_TRUE_COLOR</span></code> images are stored in the following order.</p>
<p>For 32-bit color depth:</p>
<ul class="simple">
<li><p>Byte 0: Blue</p></li>
<li><p>Byte 1: Green</p></li>
<li><p>Byte 2: Red</p></li>
<li><p>Byte 3: Alpha</p></li>
</ul>
<p>For 16-bit color depth:</p>
<ul class="simple">
<li><p>Byte 0: Green 3 lower bit, Blue 5 bit</p></li>
<li><p>Byte 1: Red 5 bit, Green 3 higher bit</p></li>
<li><p>Byte 2: Alpha byte (only with LV_IMG_CF_TRUE_COLOR_ALPHA)</p></li>
</ul>
<p>For 8-bit color depth:</p>
<ul class="simple">
<li><p>Byte 0: Red 3 bit, Green 3 bit, Blue 2 bit</p></li>
<li><p>Byte 2: Alpha byte (only with LV_IMG_CF_TRUE_COLOR_ALPHA)</p></li>
</ul>
<p>You can store images in a <em>Raw</em> format to indicate that it's not encoded with one of the built-in color formats and an external <a class="reference external" href="#image-decoder">Image decoder</a> needs to be used to decode the image.</p>
<ul class="simple">
<li><p><strong>LV_IMG_CF_RAW</strong> Indicates a basic raw image (e.g. a PNG or JPG image).</p></li>
<li><p><strong>LV_IMG_CF_RAW_ALPHA</strong> Indicates that an image has alpha and an alpha byte is added for every pixel.</p></li>
<li><p><strong>LV_IMG_CF_RAW_CHROMA_KEYED</strong> Indicates that an image is chroma-keyed as described in <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED</span></code> above.</p></li>
</ul>
</div>
<div class="section" id="add-and-use-images">
<h2>Add and use images<a class="headerlink" href="#add-and-use-images" title="Permalink to this headline">¶</a></h2>
<p>You can add images to LVGL in two ways:</p>
<ul class="simple">
<li><p>using the online converter</p></li>
<li><p>manually create images</p></li>
</ul>
<div class="section" id="online-converter">
<h3>Online converter<a class="headerlink" href="#online-converter" title="Permalink to this headline">¶</a></h3>
<p>The online Image converter is available here: https://lvgl.io/tools/imageconverter</p>
<p>Adding an image to LVGL via the online converter is easy.</p>
<ol class="simple">
<li><p>You need to select a <em>BMP</em>, <em>PNG</em> or <em>JPG</em> image first.</p></li>
<li><p>Give the image a name that will be used within LVGL.</p></li>
<li><p>Select the <a class="reference external" href="#color-formats">Color format</a>.</p></li>
<li><p>Select the type of image you want. Choosing a binary will generate a <code class="docutils literal notranslate"><span class="pre">.bin</span></code> file that must be stored separately and read using the <a class="reference external" href="#files">file support</a>. Choosing a variable will generate a standard C file that can be linked into your project.</p></li>
<li><p>Hit the <em>Convert</em> button. Once the conversion is finished, your browser will automatically download the resulting file.</p></li>
</ol>
<p>In the generated C arrays (variables), bitmaps for all the color depths (1, 8, 16 or 32) are included in the C file, but only the color depth that matches <code class="docutils literal notranslate"><span class="pre">LV_COLOR_DEPTH</span></code> in <em>lv_conf.h</em> will actually be linked into the resulting executable.</p>
<p>In the case of binary files, you need to specify the color format you want:</p>
<ul class="simple">
<li><p>RGB332 for 8-bit color depth</p></li>
<li><p>RGB565 for 16-bit color depth</p></li>
<li><p>RGB565 Swap for 16-bit color depth (two bytes are swapped)</p></li>
<li><p>RGB888 for 32-bit color depth</p></li>
</ul>
</div>
<div class="section" id="manually-create-an-image">
<h3>Manually create an image<a class="headerlink" href="#manually-create-an-image" title="Permalink to this headline">¶</a></h3>
<p>If you are generating an image at run-time, you can craft an image variable to display it using LVGL. For example:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="kt">uint8_t</span> <span class="n">my_img_data</span><span class="p">[]</span> <span class="o">=</span> <span class="p">{</span><span class="mh">0x00</span><span class="p">,</span> <span class="mh">0x01</span><span class="p">,</span> <span class="mh">0x02</span><span class="p">,</span> <span class="p">...};</span>

<span class="k">static</span> <span class="n">lv_img_dsc_t</span> <span class="n">my_img_dsc</span> <span class="o">=</span> <span class="p">{</span>
    <span class="p">.</span><span class="n">header</span><span class="p">.</span><span class="n">always_zero</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span>
    <span class="p">.</span><span class="n">header</span><span class="p">.</span><span class="n">w</span> <span class="o">=</span> <span class="mi">80</span><span class="p">,</span>
    <span class="p">.</span><span class="n">header</span><span class="p">.</span><span class="n">h</span> <span class="o">=</span> <span class="mi">60</span><span class="p">,</span>
    <span class="p">.</span><span class="n">data_size</span> <span class="o">=</span> <span class="mi">80</span> <span class="o">*</span> <span class="mi">60</span> <span class="o">*</span> <span class="n">LV_COLOR_DEPTH</span> <span class="o">/</span> <span class="mi">8</span><span class="p">,</span>
    <span class="p">.</span><span class="n">header</span><span class="p">.</span><span class="n">cf</span> <span class="o">=</span> <span class="n">LV_IMG_CF_TRUE_COLOR</span><span class="p">,</span>          <span class="cm">/*Set the color format*/</span>
    <span class="p">.</span><span class="n">data</span> <span class="o">=</span> <span class="n">my_img_data</span><span class="p">,</span>
<span class="p">};</span>
</pre></div>
</div>
<p>If the color format is <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_TRUE_COLOR_ALPHA</span></code> you can set <code class="docutils literal notranslate"><span class="pre">data_size</span></code> like <code class="docutils literal notranslate"><span class="pre">80</span> <span class="pre">*</span> <span class="pre">60</span> <span class="pre">*</span> <span class="pre">LV_IMG_PX_SIZE_ALPHA_BYTE</span></code>.</p>
<p>Another (possibly simpler) option to create and display an image at run-time is to use the <a class="reference internal" href="../widgets/core/canvas.html"><span class="doc">Canvas</span></a> object.</p>
</div>
<div class="section" id="use-images">
<h3>Use images<a class="headerlink" href="#use-images" title="Permalink to this headline">¶</a></h3>
<p>The simplest way to use an image in LVGL is to display it with an <a class="reference internal" href="../widgets/core/img.html"><span class="doc">lv_img</span></a> object:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="n">lv_obj_t</span> <span class="o">*</span> <span class="n">icon</span> <span class="o">=</span> <span class="n">lv_img_create</span><span class="p">(</span><span class="n">lv_scr_act</span><span class="p">(),</span> <span class="nb">NULL</span><span class="p">);</span>

<span class="cm">/*From variable*/</span>
<span class="n">lv_img_set_src</span><span class="p">(</span><span class="n">icon</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">my_icon_dsc</span><span class="p">);</span>

<span class="cm">/*From file*/</span>
<span class="n">lv_img_set_src</span><span class="p">(</span><span class="n">icon</span><span class="p">,</span> <span class="s">&quot;S:my_icon.bin&quot;</span><span class="p">);</span>
</pre></div>
</div>
<p>If the image was converted with the online converter, you should use <code class="docutils literal notranslate"><span class="pre">LV_IMG_DECLARE(my_icon_dsc)</span></code> to declare the image in the file where you want to use it.</p>
</div>
</div>
<div class="section" id="image-decoder">
<h2>Image decoder<a class="headerlink" href="#image-decoder" title="Permalink to this headline">¶</a></h2>
<p>As you can see in the <a class="reference external" href="#color-formats">Color formats</a> section, LVGL supports several built-in image formats. In many cases, these will be all you need. LVGL doesn't directly support, however, generic image formats like PNG or JPG.</p>
<p>To handle non-built-in image formats, you need to use external libraries and attach them to LVGL via the <em>Image decoder</em> interface.</p>
<p>An image decoder consists of 4 callbacks:</p>
<ul class="simple">
<li><p><strong>info</strong> get some basic info about the image (width, height and color format).</p></li>
<li><p><strong>open</strong> open an image: either store a decoded image or set it to <code class="docutils literal notranslate"><span class="pre">NULL</span></code> to indicate the image can be read line-by-line.</p></li>
<li><p><strong>read</strong> if <em>open</em> didn't fully open an image this function should give some decoded data (max 1 line) from a given position.</p></li>
<li><p><strong>close</strong> close an opened image, free the allocated resources.</p></li>
</ul>
<p>You can add any number of image decoders. When an image needs to be drawn, the library will try all the registered image decoders until it finds one which can open the image, i.e. one which knows that format.</p>
<p>The <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_TRUE_COLOR_...</span></code>, <code class="docutils literal notranslate"><span class="pre">LV_IMG_INDEXED_...</span></code> and <code class="docutils literal notranslate"><span class="pre">LV_IMG_ALPHA_...</span></code> formats (essentially, all non-<code class="docutils literal notranslate"><span class="pre">RAW</span></code> formats) are understood by the built-in decoder.</p>
<div class="section" id="custom-image-formats">
<h3>Custom image formats<a class="headerlink" href="#custom-image-formats" title="Permalink to this headline">¶</a></h3>
<p>The easiest way to create a custom image is to use the online image converter and select <code class="docutils literal notranslate"><span class="pre">Raw</span></code>, <code class="docutils literal notranslate"><span class="pre">Raw</span> <span class="pre">with</span> <span class="pre">alpha</span></code> or <code class="docutils literal notranslate"><span class="pre">Raw</span> <span class="pre">with</span> <span class="pre">chroma-keyed</span></code> format. It will just take every byte of the binary file you uploaded and write it as an image &quot;bitmap&quot;. You then need to attach an image decoder that will parse that bitmap and generate the real, renderable bitmap.</p>
<p><code class="docutils literal notranslate"><span class="pre">header.cf</span></code> will be <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_RAW</span></code>, <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_RAW_ALPHA</span></code> or <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_RAW_CHROMA_KEYED</span></code> accordingly. You should choose the correct format according to your needs: a fully opaque image, using an alpha channel or using a chroma key.</p>
<p>After decoding, the <em>raw</em> formats are considered <em>True color</em> by the library. In other words, the image decoder must decode the <em>Raw</em> images to <em>True color</em> according to the format described in the <a class="reference external" href="#color-formats">Color formats</a> section.</p>
<p>If you want to create a custom image, you should use <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_USER_ENCODED_0..7</span></code> color formats. However, the library can draw images only in <em>True color</em> format (or <em>Raw</em> but ultimately it will be in <em>True color</em> format).
The <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_USER_ENCODED_...</span></code> formats are not known by the library and therefore they should be decoded to one of the known formats from the <a class="reference external" href="#color-formats">Color formats</a> section.
It's possible to decode an image to a non-true color format first (for example: <code class="docutils literal notranslate"><span class="pre">LV_IMG_INDEXED_4BITS</span></code>) and then call the built-in decoder functions to convert it to <em>True color</em>.</p>
<p>With <em>User encoded</em> formats, the color format in the open function (<code class="docutils literal notranslate"><span class="pre">dsc-&gt;header.cf</span></code>) should be changed according to the new format.</p>
</div>
<div class="section" id="register-an-image-decoder">
<h3>Register an image decoder<a class="headerlink" href="#register-an-image-decoder" title="Permalink to this headline">¶</a></h3>
<p>Here's an example of getting LVGL to work with PNG images.</p>
<p>First, you need to create a new image decoder and set some functions to open/close the PNG files. It should look like this:</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span><span class="cm">/*Create a new decoder and register functions */</span>
<span class="n">lv_img_decoder_t</span> <span class="o">*</span> <span class="n">dec</span> <span class="o">=</span> <span class="n">lv_img_decoder_create</span><span class="p">();</span>
<span class="n">lv_img_decoder_set_info_cb</span><span class="p">(</span><span class="n">dec</span><span class="p">,</span> <span class="n">decoder_info</span><span class="p">);</span>
<span class="n">lv_img_decoder_set_open_cb</span><span class="p">(</span><span class="n">dec</span><span class="p">,</span> <span class="n">decoder_open</span><span class="p">);</span>
<span class="n">lv_img_decoder_set_close_cb</span><span class="p">(</span><span class="n">dec</span><span class="p">,</span> <span class="n">decoder_close</span><span class="p">);</span>


<span class="cm">/**</span>
<span class="cm"> * Get info about a PNG image</span>
<span class="cm"> * @param decoder pointer to the decoder where this function belongs</span>
<span class="cm"> * @param src can be file name or pointer to a C array</span>
<span class="cm"> * @param header store the info here</span>
<span class="cm"> * @return LV_RES_OK: no error; LV_RES_INV: can&#39;t get the info</span>
<span class="cm"> */</span>
<span class="k">static</span> <span class="n">lv_res_t</span> <span class="nf">decoder_info</span><span class="p">(</span><span class="n">lv_img_decoder_t</span> <span class="o">*</span> <span class="n">decoder</span><span class="p">,</span> <span class="k">const</span> <span class="kt">void</span> <span class="o">*</span> <span class="n">src</span><span class="p">,</span> <span class="n">lv_img_header_t</span> <span class="o">*</span> <span class="n">header</span><span class="p">)</span>
<span class="p">{</span>
  <span class="cm">/*Check whether the type `src` is known by the decoder*/</span>
  <span class="k">if</span><span class="p">(</span><span class="n">is_png</span><span class="p">(</span><span class="n">src</span><span class="p">)</span> <span class="o">==</span> <span class="nb">false</span><span class="p">)</span> <span class="k">return</span> <span class="n">LV_RES_INV</span><span class="p">;</span>

  <span class="cm">/* Read the PNG header and find `width` and `height` */</span>
  <span class="p">...</span>

  <span class="n">header</span><span class="o">-&gt;</span><span class="n">cf</span> <span class="o">=</span> <span class="n">LV_IMG_CF_RAW_ALPHA</span><span class="p">;</span>
  <span class="n">header</span><span class="o">-&gt;</span><span class="n">w</span> <span class="o">=</span> <span class="n">width</span><span class="p">;</span>
  <span class="n">header</span><span class="o">-&gt;</span><span class="n">h</span> <span class="o">=</span> <span class="n">height</span><span class="p">;</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Open a PNG image and return the decided image</span>
<span class="cm"> * @param decoder pointer to the decoder where this function belongs</span>
<span class="cm"> * @param dsc pointer to a descriptor which describes this decoding session</span>
<span class="cm"> * @return LV_RES_OK: no error; LV_RES_INV: can&#39;t get the info</span>
<span class="cm"> */</span>
<span class="k">static</span> <span class="n">lv_res_t</span> <span class="nf">decoder_open</span><span class="p">(</span><span class="n">lv_img_decoder_t</span> <span class="o">*</span> <span class="n">decoder</span><span class="p">,</span> <span class="n">lv_img_decoder_dsc_t</span> <span class="o">*</span> <span class="n">dsc</span><span class="p">)</span>
<span class="p">{</span>

  <span class="cm">/*Check whether the type `src` is known by the decoder*/</span>
  <span class="k">if</span><span class="p">(</span><span class="n">is_png</span><span class="p">(</span><span class="n">src</span><span class="p">)</span> <span class="o">==</span> <span class="nb">false</span><span class="p">)</span> <span class="k">return</span> <span class="n">LV_RES_INV</span><span class="p">;</span>

  <span class="cm">/*Decode and store the image. If `dsc-&gt;img_data` is `NULL`, the `read_line` function will be called to get the image data line-by-line*/</span>
  <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">img_data</span> <span class="o">=</span> <span class="n">my_png_decoder</span><span class="p">(</span><span class="n">src</span><span class="p">);</span>

  <span class="cm">/*Change the color format if required. For PNG usually &#39;Raw&#39; is fine*/</span>
  <span class="n">dsc</span><span class="o">-&gt;</span><span class="n">header</span><span class="p">.</span><span class="n">cf</span> <span class="o">=</span> <span class="n">LV_IMG_CF_</span><span class="p">...</span>

  <span class="cm">/*Call a built in decoder function if required. It&#39;s not required if`my_png_decoder` opened the image in true color format.*/</span>
  <span class="n">lv_res_t</span> <span class="n">res</span> <span class="o">=</span> <span class="n">lv_img_decoder_built_in_open</span><span class="p">(</span><span class="n">decoder</span><span class="p">,</span> <span class="n">dsc</span><span class="p">);</span>

  <span class="k">return</span> <span class="n">res</span><span class="p">;</span>
<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Decode `len` pixels starting from the given `x`, `y` coordinates and store them in `buf`.</span>
<span class="cm"> * Required only if the &quot;open&quot; function can&#39;t open the whole decoded pixel array. (dsc-&gt;img_data == NULL)</span>
<span class="cm"> * @param decoder pointer to the decoder the function associated with</span>
<span class="cm"> * @param dsc pointer to decoder descriptor</span>
<span class="cm"> * @param x start x coordinate</span>
<span class="cm"> * @param y start y coordinate</span>
<span class="cm"> * @param len number of pixels to decode</span>
<span class="cm"> * @param buf a buffer to store the decoded pixels</span>
<span class="cm"> * @return LV_RES_OK: ok; LV_RES_INV: failed</span>
<span class="cm"> */</span>
<span class="n">lv_res_t</span> <span class="nf">decoder_built_in_read_line</span><span class="p">(</span><span class="n">lv_img_decoder_t</span> <span class="o">*</span> <span class="n">decoder</span><span class="p">,</span> <span class="n">lv_img_decoder_dsc_t</span> <span class="o">*</span> <span class="n">dsc</span><span class="p">,</span> <span class="n">lv_coord_t</span> <span class="n">x</span><span class="p">,</span>
                                                  <span class="n">lv_coord_t</span> <span class="n">y</span><span class="p">,</span> <span class="n">lv_coord_t</span> <span class="n">len</span><span class="p">,</span> <span class="kt">uint8_t</span> <span class="o">*</span> <span class="n">buf</span><span class="p">)</span>
<span class="p">{</span>
   <span class="cm">/*With PNG it&#39;s usually not required*/</span>

   <span class="cm">/*Copy `len` pixels from `x` and `y` coordinates in True color format to `buf` */</span>

<span class="p">}</span>

<span class="cm">/**</span>
<span class="cm"> * Free the allocated resources</span>
<span class="cm"> * @param decoder pointer to the decoder where this function belongs</span>
<span class="cm"> * @param dsc pointer to a descriptor which describes this decoding session</span>
<span class="cm"> */</span>
<span class="k">static</span> <span class="kt">void</span> <span class="nf">decoder_close</span><span class="p">(</span><span class="n">lv_img_decoder_t</span> <span class="o">*</span> <span class="n">decoder</span><span class="p">,</span> <span class="n">lv_img_decoder_dsc_t</span> <span class="o">*</span> <span class="n">dsc</span><span class="p">)</span>
<span class="p">{</span>
  <span class="cm">/*Free all allocated data*/</span>

  <span class="cm">/*Call the built-in close function if the built-in open/read_line was used*/</span>
  <span class="n">lv_img_decoder_built_in_close</span><span class="p">(</span><span class="n">decoder</span><span class="p">,</span> <span class="n">dsc</span><span class="p">);</span>

<span class="p">}</span>
</pre></div>
</div>
<p>So in summary:</p>
<ul class="simple">
<li><p>In <code class="docutils literal notranslate"><span class="pre">decoder_info</span></code>, you should collect some basic information about the image and store it in <code class="docutils literal notranslate"><span class="pre">header</span></code>.</p></li>
<li><p>In <code class="docutils literal notranslate"><span class="pre">decoder_open</span></code>, you should try to open the image source pointed by <code class="docutils literal notranslate"><span class="pre">dsc-&gt;src</span></code>. Its type is already in <code class="docutils literal notranslate"><span class="pre">dsc-&gt;src_type</span> <span class="pre">==</span> <span class="pre">LV_IMG_SRC_FILE/VARIABLE</span></code>.
If this format/type is not supported by the decoder, return <code class="docutils literal notranslate"><span class="pre">LV_RES_INV</span></code>.
However, if you can open the image, a pointer to the decoded <em>True color</em> image should be set in <code class="docutils literal notranslate"><span class="pre">dsc-&gt;img_data</span></code>.
If the format is known, but you don't want to decode the entire image (e.g. no memory for it), set <code class="docutils literal notranslate"><span class="pre">dsc-&gt;img_data</span> <span class="pre">=</span> <span class="pre">NULL</span></code> and use <code class="docutils literal notranslate"><span class="pre">read_line</span></code> to get the pixel data.</p></li>
<li><p>In <code class="docutils literal notranslate"><span class="pre">decoder_close</span></code> you should free all allocated resources.</p></li>
<li><p><code class="docutils literal notranslate"><span class="pre">decoder_read</span></code> is optional. Decoding the whole image requires extra memory and some computational overhead.
However, it can decode one line of the image without decoding the whole image, you can save memory and time.
To indicate that the <em>line read</em> function should be used, set <code class="docutils literal notranslate"><span class="pre">dsc-&gt;img_data</span> <span class="pre">=</span> <span class="pre">NULL</span></code> in the open function.</p></li>
</ul>
</div>
<div class="section" id="manually-use-an-image-decoder">
<h3>Manually use an image decoder<a class="headerlink" href="#manually-use-an-image-decoder" title="Permalink to this headline">¶</a></h3>
<p>LVGL will use registered image decoders automatically if you try and draw a raw image (i.e. using the <code class="docutils literal notranslate"><span class="pre">lv_img</span></code> object) but you can use them manually too. Create an <code class="docutils literal notranslate"><span class="pre">lv_img_decoder_dsc_t</span></code> variable to describe the decoding session and call <code class="docutils literal notranslate"><span class="pre">lv_img_decoder_open()</span></code>.</p>
<p>The <code class="docutils literal notranslate"><span class="pre">color</span></code> parameter is used only with <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_ALPHA_1/2/4/8BIT</span></code> images to tell color of the image.
<code class="docutils literal notranslate"><span class="pre">frame_id</span></code> can be used if the image to open is an animation.</p>
<div class="highlight-c notranslate"><div class="highlight"><pre><span></span>
<span class="n">lv_res_t</span> <span class="n">res</span><span class="p">;</span>
<span class="n">lv_img_decoder_dsc_t</span> <span class="n">dsc</span><span class="p">;</span>
<span class="n">res</span> <span class="o">=</span> <span class="n">lv_img_decoder_open</span><span class="p">(</span><span class="o">&amp;</span><span class="n">dsc</span><span class="p">,</span> <span class="o">&amp;</span><span class="n">my_img_dsc</span><span class="p">,</span> <span class="n">color</span><span class="p">,</span> <span class="n">frame_id</span><span class="p">);</span>

<span class="k">if</span><span class="p">(</span><span class="n">res</span> <span class="o">==</span> <span class="n">LV_RES_OK</span><span class="p">)</span> <span class="p">{</span>
  <span class="cm">/*Do something with `dsc-&gt;img_data`*/</span>
  <span class="n">lv_img_decoder_close</span><span class="p">(</span><span class="o">&amp;</span><span class="n">dsc</span><span class="p">);</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
</div>
<div class="section" id="image-caching">
<h2>Image caching<a class="headerlink" href="#image-caching" title="Permalink to this headline">¶</a></h2>
<p>Sometimes it takes a lot of time to open an image.
Continuously decoding a PNG image or loading images from a slow external memory would be inefficient and detrimental to the user experience.</p>
<p>Therefore, LVGL caches a given number of images. Caching means some images will be left open, hence LVGL can quickly access them from <code class="docutils literal notranslate"><span class="pre">dsc-&gt;img_data</span></code> instead of needing to decode them again.</p>
<p>Of course, caching images is resource intensive as it uses more RAM to store the decoded image. LVGL tries to optimize the process as much as possible (see below), but you will still need to evaluate if this would be beneficial for your platform or not. Image caching may not be worth it if you have a deeply embedded target which decodes small images from a relatively fast storage medium.</p>
<div class="section" id="cache-size">
<h3>Cache size<a class="headerlink" href="#cache-size" title="Permalink to this headline">¶</a></h3>
<p>The number of cache entries can be defined with <code class="docutils literal notranslate"><span class="pre">LV_IMG_CACHE_DEF_SIZE</span></code> in <em>lv_conf.h</em>. The default value is 1 so only the most recently used image will be left open.</p>
<p>The size of the cache can be changed at run-time with <code class="docutils literal notranslate"><span class="pre">lv_img_cache_set_size(entry_num)</span></code>.</p>
</div>
<div class="section" id="value-of-images">
<h3>Value of images<a class="headerlink" href="#value-of-images" title="Permalink to this headline">¶</a></h3>
<p>When you use more images than cache entries, LVGL can't cache all the images. Instead, the library will close one of the cached images to free space.</p>
<p>To decide which image to close, LVGL uses a measurement it previously made of how long it took to open the image. Cache entries that hold slower-to-open images are considered more valuable and are kept in the cache as long as possible.</p>
<p>If you want or need to override LVGL's measurement, you can manually set the <em>time to open</em> value in the decoder open function in <code class="docutils literal notranslate"><span class="pre">dsc-&gt;time_to_open</span> <span class="pre">=</span> <span class="pre">time_ms</span></code> to give a higher or lower value. (Leave it unchanged to let LVGL control it.)</p>
<p>Every cache entry has a <em>&quot;life&quot;</em> value. Every time an image is opened through the cache, the <em>life</em> value of all entries is decreased to make them older.
When a cached image is used, its <em>life</em> value is increased by the <em>time to open</em> value to make it more alive.</p>
<p>If there is no more space in the cache, the entry with the lowest life value will be closed.</p>
</div>
<div class="section" id="memory-usage">
<h3>Memory usage<a class="headerlink" href="#memory-usage" title="Permalink to this headline">¶</a></h3>
<p>Note that a cached image might continuously consume memory. For example, if three PNG images are cached, they will consume memory while they are open.</p>
<p>Therefore, it's the user's responsibility to be sure there is enough RAM to cache even the largest images at the same time.</p>
</div>
<div class="section" id="clean-the-cache">
<h3>Clean the cache<a class="headerlink" href="#clean-the-cache" title="Permalink to this headline">¶</a></h3>
<p>Let's say you have loaded a PNG image into a <code class="docutils literal notranslate"><span class="pre">lv_img_dsc_t</span> <span class="pre">my_png</span></code> variable and use it in an <code class="docutils literal notranslate"><span class="pre">lv_img</span></code> object. If the image is already cached and you then change the underlying PNG file, you need to notify LVGL to cache the image again. Otherwise, there is no easy way of detecting that the underlying file changed and LVGL will still draw the old image from cache.</p>
<p>To do this, use <code class="docutils literal notranslate"><span class="pre">lv_img_cache_invalidate_src(&amp;my_png)</span></code>. If <code class="docutils literal notranslate"><span class="pre">NULL</span></code> is passed as a parameter, the whole cache will be cleaned.</p>
</div>
</div>
<div class="section" id="api">
<h2>API<a class="headerlink" href="#api" title="Permalink to this headline">¶</a></h2>
<div class="section" id="image-buffer">
<h3>Image buffer<a class="headerlink" href="#image-buffer" title="Permalink to this headline">¶</a></h3>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-typedefs">Typedefs</p>
<dl class="cpp type">
<dt class="sig sig-object cpp" id="_CPPv411lv_img_cf_t">
<span id="_CPPv311lv_img_cf_t"></span><span id="_CPPv211lv_img_cf_t"></span><span id="lv_img_cf_t"></span><span class="target" id="lv__img__buf_8h_1a3cd0b0d2269a76ecf35c65d5abc8fa2c"></span><span class="k"><span class="pre">typedef</span></span><span class="w"> </span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_img_cf_t</span></span></span><a class="headerlink" href="#_CPPv411lv_img_cf_t" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

</div>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-enums">Enums</p>
<dl class="cpp enum">
<dt class="sig sig-object cpp" id="_CPPv4Ut2_16">
<span id="_CPPv3Ut2_16"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fce"></span><span class="k"><span class="pre">enum</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">[anonymous]</span></span></span><a class="headerlink" href="#_CPPv4Ut2_16" title="Permalink to this definition">¶</a><br /></dt>
<dd><p><em>Values:</em></p>
<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1617LV_IMG_CF_UNKNOWNE">
<span id="_CPPv3NUt2_1617LV_IMG_CF_UNKNOWNE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceaec9725b572a51d9e6f65e325c9c17f31"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_UNKNOWN</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1617LV_IMG_CF_UNKNOWNE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1613LV_IMG_CF_RAWE">
<span id="_CPPv3NUt2_1613LV_IMG_CF_RAWE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceae79779c0a260d69563dfa30e9b11d265"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RAW</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1613LV_IMG_CF_RAWE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Contains the file as it is. Needs custom decoder function </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1619LV_IMG_CF_RAW_ALPHAE">
<span id="_CPPv3NUt2_1619LV_IMG_CF_RAW_ALPHAE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceac32f641d0c92f307ce2b93766239bd56"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RAW_ALPHA</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1619LV_IMG_CF_RAW_ALPHAE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Contains the file as it is. The image has alpha. Needs custom decoder function </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1626LV_IMG_CF_RAW_CHROMA_KEYEDE">
<span id="_CPPv3NUt2_1626LV_IMG_CF_RAW_CHROMA_KEYEDE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea07e2f7713a6d4574d34f9548b5949d13"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RAW_CHROMA_KEYED</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1626LV_IMG_CF_RAW_CHROMA_KEYEDE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Contains the file as it is. The image is chroma keyed. Needs custom decoder function </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1620LV_IMG_CF_TRUE_COLORE">
<span id="_CPPv3NUt2_1620LV_IMG_CF_TRUE_COLORE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceacc00dbb56f9207133c12cca0f94c4f8d"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_TRUE_COLOR</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1620LV_IMG_CF_TRUE_COLORE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Color format and depth should match with LV_COLOR settings </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1626LV_IMG_CF_TRUE_COLOR_ALPHAE">
<span id="_CPPv3NUt2_1626LV_IMG_CF_TRUE_COLOR_ALPHAE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea77b153c97241ea0312b96a3bd5d4f185"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_TRUE_COLOR_ALPHA</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1626LV_IMG_CF_TRUE_COLOR_ALPHAE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Same as <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_TRUE_COLOR</span></code> but every pixel has an alpha byte </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1633LV_IMG_CF_TRUE_COLOR_CHROMA_KEYEDE">
<span id="_CPPv3NUt2_1633LV_IMG_CF_TRUE_COLOR_CHROMA_KEYEDE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea4afaa8f28d1b38d91a4579a7fe5cd746"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_TRUE_COLOR_CHROMA_KEYED</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1633LV_IMG_CF_TRUE_COLOR_CHROMA_KEYEDE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Same as <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_TRUE_COLOR</span></code> but LV_COLOR_TRANSP pixels will be transparent </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1622LV_IMG_CF_INDEXED_1BITE">
<span id="_CPPv3NUt2_1622LV_IMG_CF_INDEXED_1BITE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceace7d7c0dc2a98e0d1989f1c102b5ea3b"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_INDEXED_1BIT</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1622LV_IMG_CF_INDEXED_1BITE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Can have 2 different colors in a palette (can't be chroma keyed) </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1622LV_IMG_CF_INDEXED_2BITE">
<span id="_CPPv3NUt2_1622LV_IMG_CF_INDEXED_2BITE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceaa6c3c2fdc1a2c273f50d3638ee62d775"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_INDEXED_2BIT</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1622LV_IMG_CF_INDEXED_2BITE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Can have 4 different colors in a palette (can't be chroma keyed) </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1622LV_IMG_CF_INDEXED_4BITE">
<span id="_CPPv3NUt2_1622LV_IMG_CF_INDEXED_4BITE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceac541e5ff700cbab1422972b2124fa857"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_INDEXED_4BIT</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1622LV_IMG_CF_INDEXED_4BITE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Can have 16 different colors in a palette (can't be chroma keyed) </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1622LV_IMG_CF_INDEXED_8BITE">
<span id="_CPPv3NUt2_1622LV_IMG_CF_INDEXED_8BITE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea05da196150be23ccba0bee4d64b0e13f"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_INDEXED_8BIT</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1622LV_IMG_CF_INDEXED_8BITE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Can have 256 different colors in a palette (can't be chroma keyed) </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1620LV_IMG_CF_ALPHA_1BITE">
<span id="_CPPv3NUt2_1620LV_IMG_CF_ALPHA_1BITE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea0704ce366200825b155639eabb098f72"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_ALPHA_1BIT</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1620LV_IMG_CF_ALPHA_1BITE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Can have one color and it can be drawn or not </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1620LV_IMG_CF_ALPHA_2BITE">
<span id="_CPPv3NUt2_1620LV_IMG_CF_ALPHA_2BITE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea384013e83c460e879851d57bb335c561"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_ALPHA_2BIT</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1620LV_IMG_CF_ALPHA_2BITE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Can have one color but 4 different alpha value </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1620LV_IMG_CF_ALPHA_4BITE">
<span id="_CPPv3NUt2_1620LV_IMG_CF_ALPHA_4BITE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea87a787a99d25627728738686b0ce3ef6"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_ALPHA_4BIT</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1620LV_IMG_CF_ALPHA_4BITE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Can have one color but 16 different alpha value </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1620LV_IMG_CF_ALPHA_8BITE">
<span id="_CPPv3NUt2_1620LV_IMG_CF_ALPHA_8BITE"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceaa886fdd8e02ff433765a3ac3ee3f3103"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_ALPHA_8BIT</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1620LV_IMG_CF_ALPHA_8BITE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Can have one color but 256 different alpha value </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1616LV_IMG_CF_RGB888E">
<span id="_CPPv3NUt2_1616LV_IMG_CF_RGB888E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea0b9b1c2a2ce84ef63fbdc53703f4c679"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RGB888</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1616LV_IMG_CF_RGB888E" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1618LV_IMG_CF_RGBA8888E">
<span id="_CPPv3NUt2_1618LV_IMG_CF_RGBA8888E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceaf8d75beb4b6712f7402b380bf880f85a"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RGBA8888</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1618LV_IMG_CF_RGBA8888E" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1618LV_IMG_CF_RGBX8888E">
<span id="_CPPv3NUt2_1618LV_IMG_CF_RGBX8888E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea2a9718a1d0825c44db8199b5ad1d93ea"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RGBX8888</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1618LV_IMG_CF_RGBX8888E" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1616LV_IMG_CF_RGB565E">
<span id="_CPPv3NUt2_1616LV_IMG_CF_RGB565E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea543ad746992fdc1f132c43b44f1af0a0"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RGB565</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1616LV_IMG_CF_RGB565E" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1618LV_IMG_CF_RGBA5658E">
<span id="_CPPv3NUt2_1618LV_IMG_CF_RGBA5658E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea4c8c97d658a427941b17ca2a663fdb74"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RGBA5658</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1618LV_IMG_CF_RGBA5658E" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1618LV_IMG_CF_RGB565A8E">
<span id="_CPPv3NUt2_1618LV_IMG_CF_RGB565A8E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcead04d66bb5a69dba938b66df0b247de00"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RGB565A8</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1618LV_IMG_CF_RGB565A8E" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1621LV_IMG_CF_RESERVED_15E">
<span id="_CPPv3NUt2_1621LV_IMG_CF_RESERVED_15E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceac6006bf886cf67fbdcba2fc35420dde1"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RESERVED_15</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1621LV_IMG_CF_RESERVED_15E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Reserved for further use. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1621LV_IMG_CF_RESERVED_16E">
<span id="_CPPv3NUt2_1621LV_IMG_CF_RESERVED_16E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceac41001bc99874f888699ee66c95e4a60"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RESERVED_16</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1621LV_IMG_CF_RESERVED_16E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Reserved for further use. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1621LV_IMG_CF_RESERVED_17E">
<span id="_CPPv3NUt2_1621LV_IMG_CF_RESERVED_17E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea43ab253b62444e42d42f13aa095cf403"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RESERVED_17</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1621LV_IMG_CF_RESERVED_17E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Reserved for further use. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1621LV_IMG_CF_RESERVED_18E">
<span id="_CPPv3NUt2_1621LV_IMG_CF_RESERVED_18E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea8218597f402ec4f232086733989c7bdd"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RESERVED_18</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1621LV_IMG_CF_RESERVED_18E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Reserved for further use. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1621LV_IMG_CF_RESERVED_19E">
<span id="_CPPv3NUt2_1621LV_IMG_CF_RESERVED_19E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea8772a961b79a708937a85ec355ee7bf2"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RESERVED_19</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1621LV_IMG_CF_RESERVED_19E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Reserved for further use. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1621LV_IMG_CF_RESERVED_20E">
<span id="_CPPv3NUt2_1621LV_IMG_CF_RESERVED_20E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea5f19c0882596b10e127b1a644d49d839"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RESERVED_20</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1621LV_IMG_CF_RESERVED_20E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Reserved for further use. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1621LV_IMG_CF_RESERVED_21E">
<span id="_CPPv3NUt2_1621LV_IMG_CF_RESERVED_21E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea97912596b301ed725dd471c109e7d22e"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RESERVED_21</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1621LV_IMG_CF_RESERVED_21E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Reserved for further use. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1621LV_IMG_CF_RESERVED_22E">
<span id="_CPPv3NUt2_1621LV_IMG_CF_RESERVED_22E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceaf6daa2d7b441229c118cae568f7be0e2"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RESERVED_22</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1621LV_IMG_CF_RESERVED_22E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Reserved for further use. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1621LV_IMG_CF_RESERVED_23E">
<span id="_CPPv3NUt2_1621LV_IMG_CF_RESERVED_23E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceaab39036176cb11aad4434ae226d2b701"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_RESERVED_23</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1621LV_IMG_CF_RESERVED_23E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Reserved for further use. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_0E">
<span id="_CPPv3NUt2_1624LV_IMG_CF_USER_ENCODED_0E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea13acddabcd2b3d47fd6f77f1aa014788"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_USER_ENCODED_0</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_0E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>User holder encoding format. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_1E">
<span id="_CPPv3NUt2_1624LV_IMG_CF_USER_ENCODED_1E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea7a5e55bc05ae9d4fafa3670ce8fcdf07"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_USER_ENCODED_1</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_1E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>User holder encoding format. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_2E">
<span id="_CPPv3NUt2_1624LV_IMG_CF_USER_ENCODED_2E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceabd5c306386fd2f5c061b8b1c1bcaf512"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_USER_ENCODED_2</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_2E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>User holder encoding format. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_3E">
<span id="_CPPv3NUt2_1624LV_IMG_CF_USER_ENCODED_3E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea5498735a659fb327623b221baa39d8a2"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_USER_ENCODED_3</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_3E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>User holder encoding format. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_4E">
<span id="_CPPv3NUt2_1624LV_IMG_CF_USER_ENCODED_4E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceaed7b220bc523d7e71e118d663e93de95"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_USER_ENCODED_4</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_4E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>User holder encoding format. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_5E">
<span id="_CPPv3NUt2_1624LV_IMG_CF_USER_ENCODED_5E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea86489e0f698809d9de29da439f62df97"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_USER_ENCODED_5</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_5E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>User holder encoding format. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_6E">
<span id="_CPPv3NUt2_1624LV_IMG_CF_USER_ENCODED_6E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fceaa8a98ec44b8871abe5dc1b2e59cead26"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_USER_ENCODED_6</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_6E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>User holder encoding format. </p>
</dd></dl>

<dl class="cpp enumerator">
<dt class="sig sig-object cpp" id="_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_7E">
<span id="_CPPv3NUt2_1624LV_IMG_CF_USER_ENCODED_7E"></span><span class="target" id="lv__img__buf_8h_1aaf105ae5beaca1dee30ae54530691fcea8d3c364964cd71c5cdde6c27b1fb48f4"></span><span class="k"><span class="pre">enumerator</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">LV_IMG_CF_USER_ENCODED_7</span></span></span><a class="headerlink" href="#_CPPv4NUt2_1624LV_IMG_CF_USER_ENCODED_7E" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>User holder encoding format. </p>
</dd></dl>

</dd></dl>

</div>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-functions">Functions</p>
<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv416lv_img_buf_alloc10lv_coord_t10lv_coord_t11lv_img_cf_t">
<span id="_CPPv316lv_img_buf_alloc10lv_coord_t10lv_coord_t11lv_img_cf_t"></span><span id="_CPPv216lv_img_buf_alloc10lv_coord_t10lv_coord_t11lv_img_cf_t"></span><span id="lv_img_buf_alloc__lv_coord_t.lv_coord_t.lv_img_cf_t"></span><span class="target" id="lv__img__buf_8h_1a0119ae731cc4db78cb1ac5d57f1cea4c"></span><a class="reference internal" href="#_CPPv412lv_img_dsc_t" title="lv_img_dsc_t"><span class="n"><span class="pre">lv_img_dsc_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">lv_img_buf_alloc</span></span></span><span class="sig-paren">(</span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">w</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">h</span></span>, <a class="reference internal" href="#_CPPv411lv_img_cf_t" title="lv_img_cf_t"><span class="n"><span class="pre">lv_img_cf_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">cf</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv416lv_img_buf_alloc10lv_coord_t10lv_coord_t11lv_img_cf_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Allocate an image buffer in RAM </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>w</strong> -- width of image </p></li>
<li><p><strong>h</strong> -- height of image </p></li>
<li><p><strong>cf</strong> -- a color format (<code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_...</span></code>) </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>an allocated image, or NULL on failure </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv423lv_img_buf_get_px_colorPK12lv_img_dsc_t10lv_coord_t10lv_coord_t10lv_color_t">
<span id="_CPPv323lv_img_buf_get_px_colorPK12lv_img_dsc_t10lv_coord_t10lv_coord_t10lv_color_t"></span><span id="_CPPv223lv_img_buf_get_px_colorPK12lv_img_dsc_t10lv_coord_t10lv_coord_t10lv_color_t"></span><span id="lv_img_buf_get_px_color__lv_img_dsc_tCP.lv_coord_t.lv_coord_t.lv_color_t"></span><span class="target" id="lv__img__buf_8h_1a4f46c0641240c11c127f55a4bb176963"></span><span class="n"><span class="pre">lv_color_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_img_buf_get_px_color</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv412lv_img_dsc_t" title="lv_img_dsc_t"><span class="n"><span class="pre">lv_img_dsc_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">dsc</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">x</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">y</span></span>, <span class="n"><span class="pre">lv_color_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">color</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv423lv_img_buf_get_px_colorPK12lv_img_dsc_t10lv_coord_t10lv_coord_t10lv_color_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the color of an image's pixel </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>dsc</strong> -- an image descriptor </p></li>
<li><p><strong>x</strong> -- x coordinate of the point to get </p></li>
<li><p><strong>y</strong> -- x coordinate of the point to get </p></li>
<li><p><strong>color</strong> -- the color of the image. In case of <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_ALPHA_1/2/4/8</span></code> this color is used. Not used in other cases. </p></li>
<li><p><strong>safe</strong> -- true: check out of bounds </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>color of the point </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv423lv_img_buf_get_px_alphaPK12lv_img_dsc_t10lv_coord_t10lv_coord_t">
<span id="_CPPv323lv_img_buf_get_px_alphaPK12lv_img_dsc_t10lv_coord_t10lv_coord_t"></span><span id="_CPPv223lv_img_buf_get_px_alphaPK12lv_img_dsc_t10lv_coord_t10lv_coord_t"></span><span id="lv_img_buf_get_px_alpha__lv_img_dsc_tCP.lv_coord_t.lv_coord_t"></span><span class="target" id="lv__img__buf_8h_1a68891d96704ba49022f34bf80bb02fe9"></span><span class="n"><span class="pre">lv_opa_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_img_buf_get_px_alpha</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv412lv_img_dsc_t" title="lv_img_dsc_t"><span class="n"><span class="pre">lv_img_dsc_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">dsc</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">x</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">y</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv423lv_img_buf_get_px_alphaPK12lv_img_dsc_t10lv_coord_t10lv_coord_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the alpha value of an image's pixel </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>dsc</strong> -- pointer to an image descriptor </p></li>
<li><p><strong>x</strong> -- x coordinate of the point to set </p></li>
<li><p><strong>y</strong> -- x coordinate of the point to set </p></li>
<li><p><strong>safe</strong> -- true: check out of bounds </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>alpha value of the point </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv423lv_img_buf_set_px_colorPK12lv_img_dsc_t10lv_coord_t10lv_coord_t10lv_color_t">
<span id="_CPPv323lv_img_buf_set_px_colorPK12lv_img_dsc_t10lv_coord_t10lv_coord_t10lv_color_t"></span><span id="_CPPv223lv_img_buf_set_px_colorPK12lv_img_dsc_t10lv_coord_t10lv_coord_t10lv_color_t"></span><span id="lv_img_buf_set_px_color__lv_img_dsc_tCP.lv_coord_t.lv_coord_t.lv_color_t"></span><span class="target" id="lv__img__buf_8h_1a2bb73768c1bc747a8ce2e5356a752d4a"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_img_buf_set_px_color</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv412lv_img_dsc_t" title="lv_img_dsc_t"><span class="n"><span class="pre">lv_img_dsc_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">dsc</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">x</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">y</span></span>, <span class="n"><span class="pre">lv_color_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">c</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv423lv_img_buf_set_px_colorPK12lv_img_dsc_t10lv_coord_t10lv_coord_t10lv_color_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the color of a pixel of an image. The alpha channel won't be affected. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>dsc</strong> -- pointer to an image descriptor </p></li>
<li><p><strong>x</strong> -- x coordinate of the point to set </p></li>
<li><p><strong>y</strong> -- x coordinate of the point to set </p></li>
<li><p><strong>c</strong> -- color of the point </p></li>
<li><p><strong>safe</strong> -- true: check out of bounds </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv423lv_img_buf_set_px_alphaPK12lv_img_dsc_t10lv_coord_t10lv_coord_t8lv_opa_t">
<span id="_CPPv323lv_img_buf_set_px_alphaPK12lv_img_dsc_t10lv_coord_t10lv_coord_t8lv_opa_t"></span><span id="_CPPv223lv_img_buf_set_px_alphaPK12lv_img_dsc_t10lv_coord_t10lv_coord_t8lv_opa_t"></span><span id="lv_img_buf_set_px_alpha__lv_img_dsc_tCP.lv_coord_t.lv_coord_t.lv_opa_t"></span><span class="target" id="lv__img__buf_8h_1a2018250537f171c5bda670b49bd7408d"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_img_buf_set_px_alpha</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv412lv_img_dsc_t" title="lv_img_dsc_t"><span class="n"><span class="pre">lv_img_dsc_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">dsc</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">x</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">y</span></span>, <span class="n"><span class="pre">lv_opa_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">opa</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv423lv_img_buf_set_px_alphaPK12lv_img_dsc_t10lv_coord_t10lv_coord_t8lv_opa_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the alpha value of a pixel of an image. The color won't be affected </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>dsc</strong> -- pointer to an image descriptor </p></li>
<li><p><strong>x</strong> -- x coordinate of the point to set </p></li>
<li><p><strong>y</strong> -- x coordinate of the point to set </p></li>
<li><p><strong>opa</strong> -- the desired opacity </p></li>
<li><p><strong>safe</strong> -- true: check out of bounds </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv422lv_img_buf_set_palettePK12lv_img_dsc_t7uint8_t10lv_color_t">
<span id="_CPPv322lv_img_buf_set_palettePK12lv_img_dsc_t7uint8_t10lv_color_t"></span><span id="_CPPv222lv_img_buf_set_palettePK12lv_img_dsc_t7uint8_t10lv_color_t"></span><span id="lv_img_buf_set_palette__lv_img_dsc_tCP.uint8_t.lv_color_t"></span><span class="target" id="lv__img__buf_8h_1a3e5a43ba234dc0b3e5092e1c3cfbc5d3"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_img_buf_set_palette</span></span></span><span class="sig-paren">(</span><span class="k"><span class="pre">const</span></span><span class="w"> </span><a class="reference internal" href="#_CPPv412lv_img_dsc_t" title="lv_img_dsc_t"><span class="n"><span class="pre">lv_img_dsc_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">dsc</span></span>, <span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">id</span></span>, <span class="n"><span class="pre">lv_color_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">c</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv422lv_img_buf_set_palettePK12lv_img_dsc_t7uint8_t10lv_color_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Set the palette color of an indexed image. Valid only for <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_INDEXED1/2/4/8</span></code> </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>dsc</strong> -- pointer to an image descriptor </p></li>
<li><p><strong>id</strong> -- the palette color to set:<ul>
<li><p>for <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_INDEXED1</span></code>: 0..1</p></li>
<li><p>for <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_INDEXED2</span></code>: 0..3</p></li>
<li><p>for <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_INDEXED4</span></code>: 0..15</p></li>
<li><p>for <code class="docutils literal notranslate"><span class="pre">LV_IMG_CF_INDEXED8</span></code>: 0..255 </p></li>
</ul>
</p></li>
<li><p><strong>c</strong> -- the color to set </p></li>
</ul>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv415lv_img_buf_freeP12lv_img_dsc_t">
<span id="_CPPv315lv_img_buf_freeP12lv_img_dsc_t"></span><span id="_CPPv215lv_img_buf_freeP12lv_img_dsc_t"></span><span id="lv_img_buf_free__lv_img_dsc_tP"></span><span class="target" id="lv__img__buf_8h_1afda14850c7da203239ded571831a776e"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_img_buf_free</span></span></span><span class="sig-paren">(</span><a class="reference internal" href="#_CPPv412lv_img_dsc_t" title="lv_img_dsc_t"><span class="n"><span class="pre">lv_img_dsc_t</span></span></a><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">dsc</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv415lv_img_buf_freeP12lv_img_dsc_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Free an allocated image buffer </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><p><strong>dsc</strong> -- image buffer to free </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv423lv_img_buf_get_img_size10lv_coord_t10lv_coord_t11lv_img_cf_t">
<span id="_CPPv323lv_img_buf_get_img_size10lv_coord_t10lv_coord_t11lv_img_cf_t"></span><span id="_CPPv223lv_img_buf_get_img_size10lv_coord_t10lv_coord_t11lv_img_cf_t"></span><span id="lv_img_buf_get_img_size__lv_coord_t.lv_coord_t.lv_img_cf_t"></span><span class="target" id="lv__img__buf_8h_1a5da34d625c83610b49ee8eb11d55a8cf"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_img_buf_get_img_size</span></span></span><span class="sig-paren">(</span><span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">w</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">h</span></span>, <a class="reference internal" href="#_CPPv411lv_img_cf_t" title="lv_img_cf_t"><span class="n"><span class="pre">lv_img_cf_t</span></span></a><span class="w"> </span><span class="n sig-param"><span class="pre">cf</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv423lv_img_buf_get_img_size10lv_coord_t10lv_coord_t11lv_img_cf_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the memory consumption of a raw bitmap, given color format and dimensions. </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>w</strong> -- width </p></li>
<li><p><strong>h</strong> -- height </p></li>
<li><p><strong>cf</strong> -- color format </p></li>
</ul>
</dd>
<dt class="field-even">Returns</dt>
<dd class="field-even"><p>size in bytes </p>
</dd>
</dl>
</dd></dl>

<dl class="cpp function">
<dt class="sig sig-object cpp" id="_CPPv432_lv_img_buf_get_transformed_areaP9lv_area_t10lv_coord_t10lv_coord_t7int16_t8uint16_tPK10lv_point_t">
<span id="_CPPv332_lv_img_buf_get_transformed_areaP9lv_area_t10lv_coord_t10lv_coord_t7int16_t8uint16_tPK10lv_point_t"></span><span id="_CPPv232_lv_img_buf_get_transformed_areaP9lv_area_t10lv_coord_t10lv_coord_t7int16_t8uint16_tPK10lv_point_t"></span><span id="_lv_img_buf_get_transformed_area__lv_area_tP.lv_coord_t.lv_coord_t.int16_t.uint16_t.lv_point_tCP"></span><span class="target" id="lv__img__buf_8h_1a54f200e9ed40bbf1384696a4058feb69"></span><span class="kt"><span class="pre">void</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">_lv_img_buf_get_transformed_area</span></span></span><span class="sig-paren">(</span><span class="n"><span class="pre">lv_area_t</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">res</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">w</span></span>, <span class="n"><span class="pre">lv_coord_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">h</span></span>, <span class="n"><span class="pre">int16_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">angle</span></span>, <span class="n"><span class="pre">uint16_t</span></span><span class="w"> </span><span class="n sig-param"><span class="pre">zoom</span></span>, <span class="k"><span class="pre">const</span></span><span class="w"> </span><span class="n"><span class="pre">lv_point_t</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="n sig-param"><span class="pre">pivot</span></span><span class="sig-paren">)</span><a class="headerlink" href="#_CPPv432_lv_img_buf_get_transformed_areaP9lv_area_t10lv_coord_t10lv_coord_t7int16_t8uint16_tPK10lv_point_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Get the area of a rectangle if its rotated and scaled </p>
<dl class="field-list simple">
<dt class="field-odd">Parameters</dt>
<dd class="field-odd"><ul class="simple">
<li><p><strong>res</strong> -- store the coordinates here </p></li>
<li><p><strong>w</strong> -- width of the rectangle to transform </p></li>
<li><p><strong>h</strong> -- height of the rectangle to transform </p></li>
<li><p><strong>angle</strong> -- angle of rotation </p></li>
<li><p><strong>zoom</strong> -- zoom, (256 no zoom) </p></li>
<li><p><strong>pivot</strong> -- x,y pivot coordinates of rotation </p></li>
</ul>
</dd>
</dl>
</dd></dl>

</div>
<dl class="cpp struct">
<dt class="sig sig-object cpp" id="_CPPv415lv_img_header_t">
<span id="_CPPv315lv_img_header_t"></span><span id="_CPPv215lv_img_header_t"></span><span id="lv_img_header_t"></span><span class="target" id="structlv__img__header__t"></span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_img_header_t</span></span></span><a class="headerlink" href="#_CPPv415lv_img_header_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><em>#include &lt;lv_img_buf.h&gt;</em><p>The first 8 bit is very important to distinguish the different source types. For more info see <code class="docutils literal notranslate"><span class="pre">lv_img_get_src_type()</span></code> in lv_img.c On big endian systems the order is reversed so cf and always_zero must be at the end of the struct. </p>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-public-members">Public Members</p>
<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N15lv_img_header_t1hE">
<span id="_CPPv3N15lv_img_header_t1hE"></span><span id="_CPPv2N15lv_img_header_t1hE"></span><span id="lv_img_header_t::h__uint32_t"></span><span class="target" id="structlv__img__header__t_1a7e3391cd72119d417766378f18aaae2c"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">h</span></span></span><a class="headerlink" href="#_CPPv4N15lv_img_header_t1hE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N15lv_img_header_t1wE">
<span id="_CPPv3N15lv_img_header_t1wE"></span><span id="_CPPv2N15lv_img_header_t1wE"></span><span id="lv_img_header_t::w__uint32_t"></span><span class="target" id="structlv__img__header__t_1a6553f8a9dc1a0f8c50dc51dda3aab537"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">w</span></span></span><a class="headerlink" href="#_CPPv4N15lv_img_header_t1wE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N15lv_img_header_t8reservedE">
<span id="_CPPv3N15lv_img_header_t8reservedE"></span><span id="_CPPv2N15lv_img_header_t8reservedE"></span><span id="lv_img_header_t::reserved__uint32_t"></span><span class="target" id="structlv__img__header__t_1a7cf6525f2cb39346f5438973c489bf89"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">reserved</span></span></span><a class="headerlink" href="#_CPPv4N15lv_img_header_t8reservedE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N15lv_img_header_t11always_zeroE">
<span id="_CPPv3N15lv_img_header_t11always_zeroE"></span><span id="_CPPv2N15lv_img_header_t11always_zeroE"></span><span id="lv_img_header_t::always_zero__uint32_t"></span><span class="target" id="structlv__img__header__t_1a2500e38eea0424cf5639521e4cd36f74"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">always_zero</span></span></span><a class="headerlink" href="#_CPPv4N15lv_img_header_t11always_zeroE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N15lv_img_header_t2cfE">
<span id="_CPPv3N15lv_img_header_t2cfE"></span><span id="_CPPv2N15lv_img_header_t2cfE"></span><span id="lv_img_header_t::cf__uint32_t"></span><span class="target" id="structlv__img__header__t_1a28513641737b777e0c546bd098eb58af"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">cf</span></span></span><a class="headerlink" href="#_CPPv4N15lv_img_header_t2cfE" title="Permalink to this definition">¶</a><br /></dt>
<dd></dd></dl>

</div>
</dd></dl>

<dl class="cpp struct">
<dt class="sig sig-object cpp" id="_CPPv412lv_img_dsc_t">
<span id="_CPPv312lv_img_dsc_t"></span><span id="_CPPv212lv_img_dsc_t"></span><span id="lv_img_dsc_t"></span><span class="target" id="structlv__img__dsc__t"></span><span class="k"><span class="pre">struct</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">lv_img_dsc_t</span></span></span><a class="headerlink" href="#_CPPv412lv_img_dsc_t" title="Permalink to this definition">¶</a><br /></dt>
<dd><em>#include &lt;lv_img_buf.h&gt;</em><p>Image header it is compatible with the result from image converter utility </p>
<div class="breathe-sectiondef docutils container">
<p class="breathe-sectiondef-title rubric" id="breathe-section-title-public-members">Public Members</p>
<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N12lv_img_dsc_t6headerE">
<span id="_CPPv3N12lv_img_dsc_t6headerE"></span><span id="_CPPv2N12lv_img_dsc_t6headerE"></span><span id="lv_img_dsc_t::header__lv_img_header_t"></span><span class="target" id="structlv__img__dsc__t_1a552a5487bb4457d4b565dfa00381a846"></span><a class="reference internal" href="#_CPPv415lv_img_header_t" title="lv_img_header_t"><span class="n"><span class="pre">lv_img_header_t</span></span></a><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">header</span></span></span><a class="headerlink" href="#_CPPv4N12lv_img_dsc_t6headerE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>A header describing the basics of the image </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N12lv_img_dsc_t9data_sizeE">
<span id="_CPPv3N12lv_img_dsc_t9data_sizeE"></span><span id="_CPPv2N12lv_img_dsc_t9data_sizeE"></span><span id="lv_img_dsc_t::data_size__uint32_t"></span><span class="target" id="structlv__img__dsc__t_1aef7de962a5e45e270151bec6bd4cdc80"></span><span class="n"><span class="pre">uint32_t</span></span><span class="w"> </span><span class="sig-name descname"><span class="n"><span class="pre">data_size</span></span></span><a class="headerlink" href="#_CPPv4N12lv_img_dsc_t9data_sizeE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Size of the image in bytes </p>
</dd></dl>

<dl class="cpp var">
<dt class="sig sig-object cpp" id="_CPPv4N12lv_img_dsc_t4dataE">
<span id="_CPPv3N12lv_img_dsc_t4dataE"></span><span id="_CPPv2N12lv_img_dsc_t4dataE"></span><span id="lv_img_dsc_t::data__uint8_tCP"></span><span class="target" id="structlv__img__dsc__t_1a09900b90ae9c9888e341616b611df3a0"></span><span class="k"><span class="pre">const</span></span><span class="w"> </span><span class="n"><span class="pre">uint8_t</span></span><span class="w"> </span><span class="p"><span class="pre">*</span></span><span class="sig-name descname"><span class="n"><span class="pre">data</span></span></span><a class="headerlink" href="#_CPPv4N12lv_img_dsc_t4dataE" title="Permalink to this definition">¶</a><br /></dt>
<dd><p>Pointer to the data of the image </p>
</dd></dl>

</div>
</dd></dl>

</div>
</div>
</div>


           </div>
           
          </div>
          <footer>
    <div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
        <a href="file-system.html" class="btn btn-neutral float-right" title="File system" accesskey="n" rel="next">Next <span class="fa fa-arrow-circle-right" aria-hidden="true"></span></a>
        <a href="font.html" class="btn btn-neutral float-left" title="Fonts" accesskey="p" rel="prev"><span class="fa fa-arrow-circle-left" aria-hidden="true"></span> Previous</a>
    </div>

  <hr/>

  <div role="contentinfo">
    <p>
        &#169; Copyright 2021, LVGL Kft.
      <span class="lastupdated">
        Last updated on Dec 22, 2024.
      </span>

    </p>
  </div>
    
    
    
    Built with <a href="https://www.sphinx-doc.org/">Sphinx</a> using a
    
    <a href="https://github.com/readthedocs/sphinx_rtd_theme">theme</a>
    
    provided by <a href="https://readthedocs.org">Read the Docs</a>. 

</footer>
        </div>
      </div>

    </section>

  </div>
  

  <script type="text/javascript">
      jQuery(function () {
          SphinxRtdTheme.Navigation.enable(true);
      });
  </script>

  
  
    
  

<style>
  .wy-side-nav-search > div[role="search"] {
    color: black;
  }
</style>
 <script type="text/javascript">
    $(document).ready(function() {
        $(".toggle > *").hide();
        $(".toggle .header").show();
        $(".toggle .header").click(function() {
            $(this).parent().children().not(".header").toggle(400);
            $(this).parent().children(".header").toggleClass("open");
        })
    });
</script>

<script type="text/javascript">
function add_version_selector()
{
    return fetch("https://raw.githubusercontent.com/lvgl/docs_compiled/gh-pages/versionlist.txt")
        .then(res => res.text())
        .then(text => {
            const versions = text.split("\n").filter(version => version.trim().length > 0);
            let p = document.getElementById("rtd-search-form").parentElement;
            p.innerHTML = `
            <select name="versions" id="versions" onchange="ver_sel()" style="border-radius:5px; margin-bottom:15px">
            ${versions.map(version => {
                let versionName = "";
                if(version == "master") versionName = "master (latest)";
                else versionName = "v" + ((version.indexOf(".") != -1) ? version : (version + " (latest minor)"));
                return `<option value="${version}">${versionName}</option>`;
            })}
            </select>` + p.innerHTML;
        });
}

function ver_sel()
{
  var x = document.getElementById("versions").value;
  window.location.href = window.location.protocol + "//" + window.location.host + "/" + x + "/";
}

document.addEventListener('DOMContentLoaded', (event) => {
    add_version_selector().then(() => {
        var value = window.location.pathname.split('/')[1];
        document.getElementById("versions").value = value;
    });

})
document.addEventListener('DOMContentLoaded', (event) => {
    function onIntersection(entries) {
        entries.forEach(entry => {
            let currentlyLoaded = entry.target.getAttribute("data-is-loaded") == "true";
            let shouldBeLoaded = entry.intersectionRatio > 0;
            if(currentlyLoaded != shouldBeLoaded) {
                entry.target.setAttribute("data-is-loaded", shouldBeLoaded);
                if(shouldBeLoaded) {
                    let iframe = document.createElement("iframe");
                    iframe.src = entry.target.getAttribute("data-real-src");
                    entry.target.appendChild(iframe);
                } else {
                    let iframe = entry.target.querySelector("iframe");
                    iframe.parentNode.removeChild(iframe);
                }
            }
        });
    }
    const config = {
        rootMargin: '600px 0px',
        threshold: 0.01
    };
    let observer = new IntersectionObserver(onIntersection, config);
    document.querySelectorAll(".lv-example").forEach(iframe => {
        observer.observe(iframe);
    });
});
</script>


</body>
</html>